جواب:

در جاوااسکریپت، متدها مثل پراپرتی‌های معمولی هستند با این تفاوت که مقدار داخل آن‌ها یک تابع است. بنابراین متدها متفاوت از تابع‌های معمولی جاوااسکریپت نیستند. به همین دلیل به راحتی می‌توانیم این تابع را داخل یک متغیر بریزیم و ... :

let obj = {
  func() {}
};
let f = obj.func;

این موضوع برای constructorها هم صادق است. یعنی constructorهای Date, Error, Number, ... همگی توابع معمولی هستند.
در واقع تقریبا همه‌ی توابع جاوااسکریپت را می‌توانیم با کلمه کلیدی new صدا کنیم. در این صورت، تابع مورد نظر علاوه بر کدی که داخلش تعریف شده:
1- یک آبجکت جدید می‌سازد.
2- آبجکت جدید را به عنوان مقدار this تعیین می‌کند.
3- آبجکت جدید را به آبجکت func.prototype لینک می‌کند (این موضوع رو در مطالب مربوط به prototype بیشتر بررسی کردیم)
4- و در نهایت آبجکت تازه ساخته شده را return می‌کند.

function ProGraphs() {}
let a = new ProGraphs();
typeof a; // object

سایتی پر از تصاویر SVG زیبا که می‌توانید کاملاً رایگان آن‌ها را دانلود کنید.

https://gallery.manypixels.co/

#link #svg #illustration

@ProGraphs

Front-end Developer Handbook 2019 ✌️

https://frontendmasters.com/books/front-end-handbook/2019/

#link #guide #handbook

@ProGraphs

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

در مطلب قبلی نحوه‌ی تبدیل آبجکت‌ها به primitive را بررسی کردیم و دیدیم که هرگاه می‌خواهیم یک آبجکت را به یک نوع داده‌ی primitive مثل number و string تبدیل کنیم، باید ابتدا آبجکت به primitive تبدیل شود.

حالا می‌خواهیم بر پایه‌ی همین موضوع، نحوه‌ی تبدیل نوع داده‌های مختلف به Number را بررسی کنیم:
❗️تقریبا برای همه‌ی مقادیر primitive، حالت عددی از پیش تعیین شده است:
true -> 1
false -> 0
null -> 0
undefined -> NaN

❗️اگر مقدار داخل یک string غیر قابل تبدیل به عدد باشد، نتیجه NaN است:
"123" -> 123
"123AB" -> NaN

❗️برای تبدیل آبجکت‌ها (و subtypeهای آن مثل آرایه‌ها) ابتدا آبجکت به primitive تبدیل می‌شود.
سپس مقدار primitive با توجه به نکاتی که در بالا بررسی کردیم به عدد تبدیل می‌شود (کد داخل تصویر)

حالا در هر شرایط، و به هر روشی که یک مقدار را به عدد تبدیل کنیم، از این قوانین تبعیت می‌شود:
Number(false) -> 0
+false -> 0
false * 1 -> 0

#quicktip #js #coercion

@ProGraphs

برای درک درست این مطلب، باید نحوه‌ی تبدیل آبجکت‌ها به primitive رو بلد باشیم. که در مطلب قبلی بررسی کردیم.

تو این مقاله هم میتونید خیلی کامل‌تر راجع به این موضوع بخونید:

http://www.adequatelygood.com/Object-to-Primitive-Conversions-in-JavaScript.html

🔺 ابزار جستجوی فایل و فولدر‌ها با سرعتی بسیار بالا برای ویندوز

https://www.voidtools.com/

#tool #searchutility

@ProGraphs

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

#interviewquestion #js

@ProGraphs

جواب: true

نتیجه‌ی کد را در 3 مرحله بررسی می‌کنیم:

❗️مرحله اول: در خط 3 یک آرایه (که subtype آبجکت است) با یک عدد مقایسه می‌شود. اگر از عملگر === استفاده شده بود، نتیجه‌ی شرط false می‌شد.
اما چون از عملگر == استفاده شده، ابتدا آرایه به عدد تبدیل می‌شود تا مقایسه انجام شود.

❗️مرحله دوم: حالا باید آرایه proGraphs را به عدد تبدیل کنیم. اما برای این کار، باید ابتدا آرایه به primitive تبدیل شود:
- برای تبدیل آرایه به primitive ابتدا متد valueOf را صدا می‌کنیم (این متد داخل خود آرایه وجود ندارد، ولی داخل Array.prototype از پیش تعریف شده است)
اما متد valueOf که داخل Array.prototype تعریف شده است، فقط خود آرایه را return می‌کند که مشخصا یک مقدار primitive نیست!

- با توجه به این که متد valueOf نتوانست یک مقدار primitive تولید کند، متد toString را صدا می‌کنیم. این متد هم داخل Array.prototype تعریف شده است و یک لیست از تمام آیتم‌های داخل آرایه را به صورت string برمی‌گرداند:
[1, 2, 3].toString(); // "1,2,3"

پس با توجه به اینکه آرایه proGraphs فقط یک آیتم دارد، به "20" تبدیل می‌شود.

❗️مرحله سوم: از مرحله‌ی قبل آرایه به مقدار "20" تبدیل شد که یک مقدار primitive است. اما عدد نیست.
پس با توجه به قوانین تبدیل به Number، این مقدار هم به راحتی به عدد 20 تبدیل می‌شود. و در نهایت نتیجه‌ی شرط true است.

هر 3 مرحله‌ی بالا رو در مطالب قبلی به صورت کامل بررسی کردیم:

1: https://t.me/ProGraphs/432

2: https://t.me/ProGraphs/446

3: https://t.me/ProGraphs/460

همونطور که می‌بینید درک درست این کد، دانش عمیقی از مکانیزم‌های پایه‌ای جاوااسکریپت مثل coercion و prototype می‌طلبه و برای خیلی از دولوپرها گیج کننده است. پس استفاده از همچین عبارت‌هایی در پروژه‌های واقعی توصیه نمی‌شه!

100% Open Source Version of Microsoft VS Code

https://vscodium.com

#editor #vscode #opensource

@ProGraphs

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

#interviewquestion #js

@ProGraphs

لیستی از وب اپلیکیشن‌های PWA

https://pwa.rocks/

#link #pwa #sample

@ProGraphs

جواب: "2,1"

بلاک finally بعد از بلاک try-catch استفاده می‌شود و دو ویژگی مهم دارد:
1- همیشه و تحت هر شرایطی اجرا می‌شود!
2- دقیقا بعد از try-catch و قبل از هر کد دیگری اجرا می‌شود.

این دو ویژگی، حتی زمانی که داخل try-catch عبارت‌هایی مثل return, continue, ... داریم هم صادق هستند.
همین موضوع باعث می‌شود که بلاک finally برای انجام عملیات مرتبط با clean-up مناسب باشد.

حالا دوباره به کد سوال دقت کنید:
در خط 12 تابع را صدا می‌کنیم و مقدار 1 از تابع return می‌شود.
اما گفتیم که بلاک finally، دقیقا بعد از try-catch و قبل از هر کد دیگری اجرا می‌شود. بنابراین دقیقا قبل از چاپ شدن مقدار خروجی تابع، بلاک finally اجرا می‌شود و عدد 2 در کنسول چاپ می‌شود! سپس (خط 12) مقدار خروجی تابع در کنسول چاپ می‌شود.
در نهایت ابتدا عدد 2 و سپس عدد 1 در کنسول چاپ شد.

این رفتار بلاک finally مفید است و باعث می‌شود که همیشه کدهای clean-up اجرا شوند.
اما در بعضی شرایط می‌تواند گیج کننده باشد. مثلا اگر داخل خود بلاک finally هم عبارت return داشته باشیم، مقدار خروجی تابع override می‌شود!

function a() {
    try {
        return 1;
    }
    finally {
        return 2;
    }
}
a(); // 2;

🔺یه منبع فارسی خوب برای یادگیری React

https://github.com/zohre1023/Persian-The-Road-to-learn-React


#link #react

@ProGraphs

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

در مطالب قبلی تبدیل نوع داده‌های مختلف به Number و String را بررسی کردیم.

حالا می‌خواهیم ساده‌ترین تبدیل، یعنی تبدیل به Boolean را بررسی کنیم:
در spec اکمااسکریپت، لیست کوتاهی از مقادیر، تحت عنوان falsy values تعریف شده است. اگر هر کدام از مقادیری که در این لیست هستند را به Boolean تبدیل کنیم، نتیجه مقدار false خواهد بود.
این لیست شامل مقادیر زیر می‌شود:
- false
- NaN
- 0
- ""
- undefined
- null
طبیعتا هر مقداری که داخل این لیست نباشد، به مقدار true تبدیل می‌شود.
در نتیجه آبجکت‌ها و آرایه‌های خالی هم به true تبدیل می‌شوند:
Boolean({}) // true
!![] // true

#quicktip #js #coercion

@ProGraphs

دقت کنید که برای تبدیل آبجکت‌ها به Boolean، نیازی نیست که آبجکت به primitive تبدیل شود (برخلاف اعداد و stringها). و همه‌ی آبجکت‌ها truthy هستند. اگر باور نمی‌کنید این کد رو اجرا کنید 😅:

let obj = Object.create(null);
Boolean(obj); //true;

در این کد آبجکتی ساختیم که هم خالی است و هم به آبجکت دیگری لینک نشده است. در نتیجه به متدهای valueOf و toString دسترسی ندارد. اما همچنان به مقدار true تبدیل می‌شود (به مطلبی که راجع به تبدیل آبجکت به primitive منتشر کردیم مراجعه کنید).

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

#interviewquestion #js

@ProGraphs

⚔️ Game of Thrones Spoiler Blocker 😅

https://chrome.google.com/webstore/detail/gameofspoils-game-of-thro/ipjhpmdippbajafafidlinjjmfkdamci?hl=en

#tool #blocker #chrome #extension

@ProGraphs

🔺 به راحتی بخش‌هایی از یک تصویر را محو، شطرنجی یا سیاه کنید.

https://marky.space/redacted/

#link #image

@ProGraphs

جواب: 10

ابتدا کد را بررسی می‌کنیم:
دقت کنید که در این کد دو آبجکت داریم. یکی آبجکت proGraphs که یک پراپرتی read-only به نام prop دارد.
و دیگری آبجکت obj که به proGraphs لینک شده است.

در نتیجه پراپرتی prop داخل آبجکت proGraphs تعریف شده است. اما آبجکت obj هم به این پراپرتی دسترسی دارد. چون به proGraphs لینک شده است (به مطالبی که راجع به prototype chain منتشر کردیم مراجعه کنید).

حالا در خط 14, می‌خواهیم یک پراپرتی دیگر به نام prop تعریف می‌کنیم اما این بار در آبجکت obj.

انتظار داریم که این پراپرتی به راحتی به آبجکت obj اضافه شود و در خط 15 مقدار 20 را دریافت کنیم.

اما چرا 10 در کنسول چاپ شد؟
مشکل اینجاست که وقتی یک پراپرتی را read-only می‌کنیم، پراپرتی مورد نظر نه تنها در خود آبجکت، بلکه در کل prototype chain غیر قابل تغییر می‌شود.
پس چون پراپرتی prop در آبجکت proGraphs به صورت read-only تعریف شده است، هر آبجکتی که به proGraphs لینک شده باشد هم نمی‌تواند یک پراپرتی به نام prop داشته باشد!!

در نتیجه خط 14 هیچ اثری ندارد و مقدار پراپرتی 20 باقی می‌ماند.