یکی از دوستان این سری مقالات عالی راجع به برنامه نویسی functional رو شروع کردند.
قطعا خوندنش خالی از لطف نیست 👌

https://vrgl.ir/628wV

#link #article #functional #js

​​​​تبدیل نوع داده‌ها (coercion) در جاوااسکریپت (قسمت هفتم):

یکی دیگر از عملگرهایی که باعث می‌شود نوع داده‌ها به صورت خودکار تغییر کنند، عملگر مقایسه‌ای ">" است.
این عملگر می‌تواند به دو صورت مختلف مقایسه را انجام دهد:
1- مقایسه‌ی ریاضی:
1 < 2; // true

2- مقایسه‌ی alphabetic:
"aa" < "ab"; // true
"1" < "02"; // false
همانطور که می‌بینید در این حالت تک تک حروف string به صورت alphabetic مقایسه می‌شوند. یعنی 'a' از 'b' کوچک‌تر است.

❗️اما عملگر ">" چطور تشخیص می‌دهد که به کدام روش مقایسه را انجام دهد و چه زمانی نوع داده‌ها را تغییر می‌دهد (implicit coercion)؟
طبق spec اکمااسکریپت، این عملگر برای انجام مقایسه این مراحل را طی می‌کند:

1- برای انجام مقایسه هر دو مقدار باید primitive باشند. بنابراین اگر مقادیری که مقایسه می‌شوند از نوع آبجکت باشد، باید به primitive تبدیل شود (به مطلبی که راجع به تبدیل آبجکت به primitive منتشر کردیم مراجعه کنید)

2- حالا که مطمئنیم هر دو مقدار primitive هستند، اگر هر دو مقدار string باشند، مقایسه به صورت alphabetic انجام می‌شود.

3- اگر حتی یکی از دو مقدار از نوع string نباشد، هر دو مقدار به صورت خودکار به عدد تبدیل می‌شوند و مقایسه‌ی عددی انجام می‌شود (به کد داخل تصویر دقت کنید).

#quicktip #js #coercion

@ProGraphs

با اجرای این کد چه مقادیری در کنسول چاپ می‌شود؟
(به ترتیب از چپ به راست)

#interviewquestion #js

@ProGraphs

​​تبدیل نوع داده‌ها (coercion) در جاوااسکریپت (قسمت هشتم):

در انتهای مطالب coercion، عملگر "==" را بررسی می‌کنیم. همانطور که در مطالب قبلی دیدیم، اگر دو مقداری که با استفاده از عملگر "==" مقایسه می‌کنیم، از یک نوع داده نباشند، به صورت خودکار نوع داده‌ی مقادیر تغییر می‌کند تا مقایسه بین دو مقدار با نوع داده‌ی یکسان انجام شود.

❗️این موضوع در بعضی موارد نتایج کاملا گیج کننده‌ای را رقم می‌زند.
برای مثال:
20 == true; // false

در این کد یک مقدار از نوع boolean است و مقدار دیگر از نوع عدد. طبیعتاً انتظار داریم عدد 20، به مقدار true تبدیل شود و نتیجه‌ی مقایسه true شود.

اما با مراجعه به spec اکمااسکریپت، متوجه می‌شویم که اگر یک مقدار دیگر را با true یا false مقایسه کنیم، به جای اینکه مقدار مورد نظر به boolean تبدیل شود، مقدار boolean به عدد تبدیل می‌شود!
پس در این کد ابتدا مقدار true به عدد 1 تبدیل می‌شود و سپس عدد 1 و 20 مقایسه می‌شوند و نتیجه‌ی مقایسه false می‌شود.

❗️اما گاهی این کارکرد عملگر "=="، منطقی و مفید است.
برای مثال:
null == undefined; // true
همانطور که در این کد می‌بینید، وقتی با استفاده از عملگر "==" مقایسه را انجام می‌دهیم، دو مقدار null و undefined می‌توانند به یکدیگر تبدیل شوند.
به این ترتیب لازم نیست برابر بودن یک مقدار را هم با null و هم با undefined چک کنیم (به کد داخل تصویر دقت کنید)

#quicktip #js #coercion

@ProGraphs

با اجرای این کد چه مقداری در کنسول چاپ می‌شود؟

#interviewquestion #js

@ProGraphs

یک کاربرد جالب spread operator برای اضافه کردن یک آیتم به آرایه/آبجکت به صورت شرطی.

#quicktip #js #trick

@ProGraphs

فرض کنید همچین تابعی را در جاوااسکریپت نوشته‌ایم که با استفاده از transitionهای css، یک عنصر را از یک موقعیت به یک موقعیت دیگر جابه‌جا کند.

اما با اجرا شدن این تابع متوجه می‌شویم که موقعیت اولیه‌ای که برای عنصر تعریف می‌کنیم (خط ۲) کاملا نادیده گرفته می‌شود و عنصر بدون توجه به موقعیت اولیه، فقط به سمت موقعیت نهایی جابه‌جا می‌شود!

علت این موضوع چیست؟ شما چطور این مشکل را حل می‌کنید؟

#interviewquestion #js #css

@ProGraphs

🔺Kyle Simpson - Keep Betting On JavaScript ✌🏻

https://youtu.be/ft5bYnt0W48

#link #js #javascript #kylesimpson

@ProGraphs

در این کد برای event کلیک یک عنصر، دو listener تعریف کرده‌ایم.

با کلیک کردن بر روی این عنصر، چه مقادیری در کنسول چاپ می‌شوند؟
(به ترتیب از چپ به راست)

#interviewquestion #js #async

@ProGraphs

​همه‌ی ما strict-mode را به عنوان یک ویژگی برای محدود کردن بعضی رفتارهای نامتعارف جاوااسکریپت می‌شناسیم.
اما فواید strict-mode فقط به اینجا ختم نمی‌شود.
❗️در واقع محدودیت‌های بیشتری که تو این حالت اعمال می‌شود، به انجین جاوااسکریپت اجازه می‌دهد که بهینه‌سازی‌های بیشتری هم روی کد انجام دهد.

به عنوان مثال در یکی از مطالب قدیمی‌تر، با wrapper objectها آشنا شدیم.
❗️و دیدیم که به لطف wrapper objectها، داده‌های primitive هم می‌توانند مثل آبجکت‌ها متد داشته باشند.
یعنی در کد زیر، جاوااسکریپت به صورت خودکار string را تبدیل به یک wrapper object می‌کند تا متد trim را روی آن صدا کند:
"some string".trim()

❗️اما جالبه بدونید که تو حالت strict-mode، وقتی از یکی از متدهای اعداد یا stringها استفاده می‌کنیم، انجین جاوااسکریپت یک wrapper object اضافه نمی‌سازد و مستقیما از متدی که داخل prototype تعریف شده استفاده می‌کند!

برای اثبات این موضوع به کد داخل تصویر دقت کنید.
می‌بینید که متد دوم که در حالت strict-mode اجرا میشود، هیچ آبجکت اضافه‌ای برای box کردن string نمی‌سازد.

#quicktip #js #optimization

@ProGraphs

​به کد زیر دقت کنید:

let obj = {
  whatIsThis: () => {
    console.log("this is:", this);
  }
};

در این کد، متد whatIsThis داخل آبجکت obj تعریف شده است. اما با توجه به اینکه arrow functionها در جاوااسکریپت this ندارند، مقدار this داخل این تابع به آبجکت گلوبال اشاره می‌کند (و نه به خود آبجکت obj).

اما چرا وقتی از arrow functionها در کلاس‌های جاوااسکریپت استفاده می‌کنیم، مقدار this به خود آبجکت‌های کلاس اشاره می‌کند؟
به عنوان مثال به کد داخل تصویر (که یک کلاس کامپوننت ری‌اکت است) دقت کنید.
متد handleClick را به صورت arrow function تعریف کرده‌ایم، اما مقدار this به خود آبجکت react element اشاره می‌کند! (دقیقا برعکس رفتاری که در کد بالا دیدیم)

چرا رفتار arrow functionها در آبجکت‌ها و class field‌های جاوااسکریپت متفاوت است؟

#interviewquestion #js #react #thiskeyword

@ProGraphs

State of JS 2019 🎉

https://2019.stateofjs.com/

#statistics #js

توی این کد سعی میکنیم درخواستی به سرور بفرستیم و اگر درخواست fail شد، بعد از 100ms دوباره این کار رو تکرار میکنیم.

اما بعد از اجرا شدن این پروسه به مدت طولانی، متوجه memory leak میشیم.
آیا میتونید این مشکل رو پیدا و حل کنید؟
(عکس ویرایش شد)

#question #js #promise #memoryleak

@ProGraphs