6 سوءتفاهم‌ در مورد جاوا اسکریپت!

پارت 1

1: جاوااسکریپت همان جاوا است

یکی از مستمر و گسترده‌یافته‌ترین سوءتفاهم‌ها این است که جاوااسکریپت و جاوا یکسان یا زبان‌های نزدیکی به یکدیگر هستند. در واقع، آنها کاملاً متفاوت‌اند. در حالی که هر دو برخی از دستورالعمل‌های اساسی و مفاهیم را به اشتراک می‌گذارند، اما به منظورهای مختلفی بکار می‌روند و ویژگی‌های متمایزی دارند:

جاوا یک زبان استاتیک‌نوع، کامپایل‌شده است که اغلب برای ساخت برنامه‌های مستقل، برنامه‌های تلفن همراه و برنامه‌های سوی سرور استفاده می‌شود.
جاوااسکریپت یک زبان تایپ‌پویا، تفسیری است که اصولاً برای توسعه وب استفاده می‌شود و امکان اسکریپت‌نویسی و تعاملی بر روی سمت مشتری را فراهم می‌کند.

شباهت در نام‌گذاری بین این دو زبان متاسفانه است و می‌تواند به سردرگمی منجر شود، اما آنها موجودیت‌های جداگانه‌ای با اکوسیستم و موارد استفاده خود هستند.

پ.ن.پ:دوستان این پست 6 پارت داره که ترجمه میکنیم و براتون قرار میدیم❤️

Channel:@js_challenges Group:@js_masters_gp

اپراتور void چیست؟

🔸اپراتور void یک مقدار undefined را از یک عبارت ارزیابی شده بازمی‌گرداند. به عبارت دیگر؛ اپراتور void یک عبارت را مشخص می‌کند تا بدون بازگشت مقدار ارزیابی شود. این اپراتور معمولاً در جاوااسکریپت مشتری (Client-side JavaScript) استفاده می‌شود که مرورگر مقدار را نمایش ندهد.

function getYear() {
  return 2020;
};

console.log(getYear());
// خروجی: 2020

console.log(void getYear());
// خروجی: undefined

// مورد کاربرد مفید
button.onclick = () => void getYear();

#Tips_N_Tricks

Channel:@js_challenges Group:@js_masters_gp

سوال: promise executor چیست؟

🔸تمام نمونه‌های Promise یک متد به عنوان آرگومان می‌پذیرند که executor نام دارد. این executor دو متد به عنوان آرگومان می‌پذیرد: resolve و reject. درون executor، اگر متد resolve فراخوانی شود، نمونه Promise برآورده می‌شود. اگر یک استثنا پرتاب شود، به‌جای آن متد reject فراخوانی می‌شود و نمونه Promise رد می‌شود.

const executor = (resolve, reject) => {
  setTimeout(() => resolve("I'm done"), 1000);
};

new Promise(executor).then(result => {
  console.log(result);
  // خروجی پس از 1000 میلی‌ثانیه: I'm done
});

#Tips_N_Tricks

Channel:@js_challenges Group:@js_masters_gp

6 سوءتفاهم‌ در مورد جاوا اسکریپت!

پارت ۲

2: جاوااسکریپت تنها برای توسعه فرانت اند است.

اگرچه جاوااسکریپت واقعاً زبان اصلی برای توسعه فرانت اند است، اما دامنه تأثیرش به فراتر از مرورگر گسترش یافته است. با ظهور تکنولوژی‌هایی مانند Node.js، اکنون جاوااسکریپت قابلیت اجرا شدن در سمت سرور را نیز دارد. این به این معنی است که می‌توانید از جاوااسکریپت برای توسعه بک اند نیز استفاده نمایید و هم سمت فرانت و هم سمت بک اند از برنامه‌های وب را ایجاد کنید.

و در حقیقت Node.js به توسعه‌دهندگان این امکان را می‌دهد که برنامه‌های سروری با کارایی بالا، پرقدرت و موثر را با استفاده از جاوااسکریپت بسازند و این،جاوااسکریپت را که صرفاً یک زبان برای توسعه فرانت اند است را رد میکند!

Channel: @js_challenges | Group: @js_masters_gp

💎 نمایش تمامی خطا های برگشتی توسط Yup

شاید متوجه شده باشید زمانی که پکیج Yup داره فرمی رو اعتبار سنجی می کنه و به ارور میخوره فقط یک ارور رو برگشت میده در صورتی که فرم شما ممکنه شامل ارور های بیشتری باشه (مثلا ایمیل، سن و... نا معتبر باشه یا یوزر وارد نکرده باشه yup فقط میگه ایمیل نامعتبر است دیگه نمی نویسد که سن رو وارد نکردید و دیگر ارور ها).

🔸 برای حل این مسئله، مهم است بدونید که متد validate دو تا ورودی میگیره (که عموماً برخی از همکاران فقط یک ورودی بهش میدن) ورودی اول، مقادیر فرم هست که معمولاً به صورت آبجکت بهش میدیم و ورودی دوم، options هست که باید به صورت آبجکت داده شود. حالا اگه میخواید که تمامی ارور ها برگشت داده شود، به آپشن، ابجکت abortEarly: false رو بدید و در این صورت تمامی ارور ها برگشت داده میشود

💬 نکته مهم تر: از انجایی که ارور ها در (err)catch برگشت داده میشه، در این قسمت میتونید err.inner رو لاگ بگیرید و لیست ارور ها رو مشاهده کنید که متاسفانه به آبجکت inner خیلی کم پرداخته شده است.


Channel:@js_challenges
Group:@js_masters_gp

بنچمارک حلقه‌ها با استفاده از ()console.time و ()console.timeEnd

🔸بسیار مفید است که دقیقاً بدانیم چه مدت طول کشیده است تا یک عملیات اجرا شود، به خصوص زمانی که از اشکال‌زدایی حلقه‌های کند استفاده می‌شود. حتی می‌توانید با اختصاص label به متد، چندین تایمر را راه‌اندازی کنید. بیایید ببینیم چگونه کار می‌کند:

🔸با اجرای کد بالا میتوانید بنچمارک حلقه خود را بصورت میلی ثانیه در کنسول مشاهده کنید.

#Tips_N_Tricks

Channel:@js_challenges Group:@js_masters_gp

تفاوت بین Target و currentTarget در زمینهٔ رویداد (event context) چیست؟

🔸المنت target به عنوان المنت DOM اشاره دارد که رویداد را ایجاد می‌کند. به عبارت دیگر، currentTarget به عنوان المان DOM اشاره دارد که گوش کننده رویداد را گوش می‌دهد.

// html
<ul class="todo-list">
  <li class="item">سگ خودتان را پیاده بردارید</li>
</ul>

/////////////////////////////////////////////////////////////////////////////////////
// js
const list = document.querySelector(".todo-list");

list.addEventListener("click", e => {
  console.log(e.target);
  // خروجی: <li class="item">سگ خودتان را پیاده بردارید</li>
  console.log(e.currentTarget);
  // خروجی: <ul class="todo-list"></ul>
});

#Tips_N_Tricks

Channel:@js_challenges Group:@js_masters_gp

تابع currying چیست؟

🔸تابع currying یک تابع است که چندین آرگومان را می‌گیرد و آن‌ها را به یک دنباله از توابع با تنها یک آرگومان در هر زمان تبدیل می‌کند.

🔸به این ترتیب، یک تابع n-آرگومانی، به یک تابع تک آرگومانی تبدیل می‌شود و آخرین تابع، نتیجه‌ی تمامی آرگومان‌ها را در یک تابع برمی‌گرداند.

//تعریف تابع معمولی
function multiply(a, b, c) {
    return a  b  c;
};
console.log(multiply(1, 2, 3));
// خروجی: 6

// تعریف تابع currying
function multiply(a) {
    return (b) => {
        return (c) => {
            return a  b  c;
        };
    };
};
console.log(multiply(1)(2)(3));
// خروجی: 6

Channel:@js_challenges Group:@js_masters_gp

6 سوءتفاهم‌ در مورد جاوا اسکریپت!

پارت ۳

3: جاوااسکریپت یک زبان ناامن است

🔸امنیت یک نگرانی مشروع در توسعه وب است، اما ادعا کردن این است که جاوااسکریپت به طور اصولی ناامن است، یک اشتباه است. خود جاوااسکریپت به خودی خود ناامن نیست؛ بلکه مسائل امنیتی از نحوه کاربرد و پیاده‌سازی آن در برنامه‌های وب به وجود می‌آید.

🔸چالش‌های امنیتی متداول در جاوااسکریپت شامل آسیب‌پذیری‌های اسکریپت‌نویسی از راه دور (XSS) و دزدی درخواست از محل دیگر (CSRF) است. با این حال، این مسائل از طریق روش‌های بهتر مانند اعتبارسنجی ورودی، رمزنگاری خروجی و مکانیسم‌های اعتبارسنجی و اجازه‌دهی مناسب می‌توانند کاهش یابند. چارچوب‌ها و کتابخانه‌های مدرن جاوااسکریپت همچنین ویژگی‌های امنیتی را در برگیرید تا به توسعه‌دهندگان کمک کند که برنامه‌هایی امن‌تر بسازند.

Channel:@js_challenges Group:@js_masters_gp

#quick_challenge
خروجی این کنسولا چیه عاقا؟

console.log(null == "null");
console.log(undefined == "undefiend");
console.log(NaN == Number("NaN"));
console.log(Error == new Error("Error"));

یه گپ تو گروهمون نشه دوستان؟منتظریم❤️😎

Channel:@js_challenges Group:@js_masters_gp

آقا طی این یکی دو هفته خیلی از بچه ها اومدن عشق دادن به ما ❤️

بعضیا اومدن پیوی بعضیا تو گروه بعضیا رو من دیدم حتی دوبله ها داخل چنل خودشون منتشر کرده بودن بعضیا یوتیوب رو معرفی کرده بودن

یه سریا برای دوبله ها یه سریا برای یوتیوب مثل این دوستمون که عکسش رو گذاشتم یه سریا برای چالشا 🔥

یعنی واقعا دمتون گرم از این همه انرژی 🔥❤️

ضمنا اینم بگم که من این هفته امتحاناتم تموم میشه دوباره روند دوبله ها شروع میشه، منتظر باشید...

همتون مشتی هستید و با صفا ✌️

راستی آدرس یوتیوبمون رو هم می‌زارم براتون اگر دوست داشتید یه نگاه به ویدیوها بندازید و اگر خوشتون اومد ساب کنید ❤️

https://www.youtube.com/@codelabplus

من کلی ایده دارم برای یوتیوب از یه آموزش کوتاه و کاربردی برای گیت گرفته تا آموزش استفاده از پکیجای محبوب و پرطرفدار و ...

قراره کامیونیتی خفنی بسازیم اونجا که همه به زودی بشناسنش ...

Channel: @js_challenges | Group: @js_masters_gp

وراثت توابع به چه معناست؟

🔸وراثت تابعی یعنی فرآیند وراثت ویژگی‌ها از طریق اعمال یک تابع افزایشی بر یک نمونهٔ شیء است. در این روش تابع یک دامنه بسته (closure scope) ارائه می‌دهد که می‌توانید از آن برای نگهداری بخشی از داده‌ها به صورت خصوصی استفاده نمایید. تابع افزایشی از گسترش شیء دینامیک بر اساس شیء نمونه با ویژگی‌ها و متدهای جدید استفاده می‌کند.

🔸میکسین‌های تابعی نمایشگرهایی هستند که توابع کارخانه‌ای هستند که ویژگی‌ها و رفتارها را به اشیاء اضافه می‌کنند، همانند ایستگاه‌ها در یک assembly line

// تابع سازندهٔ شیء پایه
function Animal(data) {
  var that = {}; // یک شیء خالی ایجاد می‌کند
  that.name = data.name; // ویژگی "name" را به آن اضافه می‌کند
  return that; // شیء را برمی‌گرداند
};

// ایجاد شیء فرزند، ارث بری از Animal پایه
function Cat(data) {
  // شیء Animal را ایجاد می‌کند
  var that = Animal(data);
  // گسترش شیء پایه
  that.sayHello = function() {
    return 'Hello, I\'m ' + that.name;
  };
  return that;
};

// استفاده
var myCat = Cat({ name: 'Rufi' });
console.log(myCat.sayHello());
// خروجی: "Hello, I'm Rufi"

Channel:@js_challenges Group:@js_masters_gp

💎 در مورد هوک useLayoutEffect در ریکت

هوک useLayoutEffect از جمله هوک های مهم ریکته (البته احتمالاً خیلی کم بهش احتیاج پیدا خواهید کرد) که عملکردی دقیقاً شبیه useEffect رو داره با این تفاوت که به صورت synchronize اجرا می شه. به عبارتی قبل از اینکه تغییرات دام، در صفحه چاپ بشود این هوک اجرا سپس تغییرات نمایش داده می شود.

نکته: در هوک useEffect ابتدا دام رندر و در صفحه چاپ می شد سپس این هوک اجرا می شد اما در اینجا دام رندر میشه هوک useLayoutEffect صدا زده میشه و پس از آن دام در صفحه چاپ میشه.

@js_challenges
@js_masters_gp

6 سوءتفاهم‌ در مورد جاوا اسکریپت!
پارت ۴

۴: جاوا اسکریپت کند است

🔸در گذشته محدودیت‌های عملکردی جاوا اسکریپت، مخصوصا زمانی که با وظایف محاسباتی متمرکز ( computationally intensive tasks ) سر و کار داشت، نگران کننده به نظر میرسید. اما با گذشت زمان، پیشرفت‌های قابل توجهی در موتورهای جاوا اسکریپت و مرورگرها، سرعت و کارایی این زبان را افزایش داده است.

🔸موتورهای مدرن جاوا اسکریپت، مثل V8 در گوگل کروم و SpiderMonkey در Mozilla Firefox، از کامپایل JIT (Just-In-Time) استفاده می‌کنند تا اجرای کد را بهینه‌سازی کنند. WebAssembly، یک فرمت دستورالعمل باینری، عملکرد جاوا اسکریپت را با اجازه اجرای کد سطح پایین مستقیماً در مرورگر بهبود می‌بخشد.

Channel:@js_challenges Group:@js_masters_gp

#تجربه_شخصی

این ویس در مورد این هست که آیا استفاده از منابع خارجی پولی (مثل دوره های خارجی) کار درستیه؟ اگه آره چرا و اگه نه چرا؟

یه چیزی رو توی کانال اخبار تکنولوژیمون راه انداختیم تحت عنوان همین تجربه های شخصی که من توش میام از تجربیات خودم و یه سری از نظرهای شخصی خودم که ازم در رابطه با مسائل مختلف پرسیده میشه رو میگم

اونایی که ارزش شنیدن داشته باشه رو (که البته تقریبا همشون ارزش شنیدن دارن) اینجا هم می‌خوام از این به بعد بفرستم ❤️

امیدوارم که مفید باشه براتون ✌️

آیدی چنل اخبارمون:

https://news.1rj.ru/str/Tech_Nuggets

💎 اجرا شدن همزمان بخش فرانت با سرور با نوشتن npm start

احتمالا شما هم وقتی می خواهید پروژه تون رو اجرا کنید اول از فولدر فرانت پروژه رو استارت میزنید سپس یه ترمینال دیگه باز می کنید و از فولدر بک اند سرور رو استارت میزنید.

🌟 با استفاده از ابزار concurretly می تونید به سادگی با یک بار نوشتن npm start توی ترمینال، بخش فرانت و بخش بک اند به صورت خودکار اجرا کنید.
❕ برای این منظور، این پکیج رو از npmjs دانلود کنید

npm i concurrently -g

سپس فایل package.json رو باز کنید تو قسمت noscript، مقدار پراپرتی start رو مانند تصویر بدید


🟡 توجه داشته باشید که در تصویر بالا مقادیر command1 arg و command2 arg همان دستوراتیه که شما میخواهید با یک بار npm start زدن اجرا بشه

💬 توضیح مثال درون عکس :
تو این مثال وقتی npm start میزنیم ابزار concurrently میاد ابتدا دستور react-noscript start رو اجرا کنه سپس به فولدر server بره (با دستور cd server) و در اون فولدر دستور npm start رو اجرا کنه و اینجوری میشه که هم فرانت و هم سرور با یک بار npm start نوشتن ران میشن :)

#Tips_N_Tricks

@js_challenges
@js_masters_gp

3K?
Fast isn't it?! 🔥

#quick_challenge
بنام پدر و پسر بریم ببینیم کنسول چی چاپ میکنه؟

console.log(`${console.log("oh jesus") + " save me"}`);

در گروه به اعترافات شما گوش فراخواهیم داد فرزندم❤️🗿

Channel:@js_challenges Group:@js_masters_gp