#ES11
#NewFeatures
#java_script

❇️ New features in ES2020(ES 11)

🔸 در این پست به معرفی ویژگی های جدیدی که تحت عنوان ES2020 به جاوا اسکریپت اضافه شده است، می پردازیم.
باید بدانید که ES مخفف ECMAScript میباشد و استانداردی است که جاوا اسکریپت بر اساس ان ساخته شده است و شروع آن از سال 2015 بوده و گروهی از توسعه دهندگان جاوا اسکریپت و سایر افراد دیگر که در توسعه و افزودن ویژگی های جدید به جاوا اسکریپت همکاری میکنند.
در ECMAScript برای انتشار یک ویژگی جدید چهار مرحله وجود دارد :
▪️Proposal
▪️Draft
▪️Candidate
▪️Finished
🔸 زمانی که ویژگی جدید به مرحله چهارم برسد به عنوان یک بخشی از ECMAScript release تلقی میشود و از این به بعد این وظیفه ی مرورگر است که آن ویژگی را پیاده سازی کند.
🔹 پس قبل از اینکه از ویژگی جدیدی استفاده کنید مطمئن شوید که مرورگرتان آنرا پیاده سازی کرده باشد. برای این منظور میتوانید از
وب سایت caniuse کمک بگیرید.

🔶در ادامه به مهمترین ویژگی های ES11 میپردازیم

✳️ Nullish Coalescing Operator (??)

🔸زمانی که می خواهیم به یک پراپرتی یک آبجکت دسترسی داشته باشیم گاهی اوقات لازم است تا فقط درصورت null یا undefined بودن مقدار یک متغییر یا پراپرتی، مقادیر پیشفرض جایگزین شوند.
در گذشته برای این منظور از عملگر || استفاده میکردیم، اتفاقی که در حقیقت در زمان استفاده از این عملگر می افتاد این بود که مقادیر متغیر یا پراپرتی مربوطه توسط جاوااسکریپت به اجبار به Boolean تبدیل میشدند و در صورت که مقدار متغیر یا پراپرتی تعیین شده falsy بود مقدار پیشرفرض مشخص شده در نظر گرفته میشد.
مقادیر falsyType در جاوااسکریپت عبارتند از :
(رشته خالی) '' , 0,undefined,null,false,NaN , ...

const falsyTypes = {
emptyString: '',
zeroNum: 0,
falseBoolean: false,
nullValue: null,
}
const undefinedValue = falsyTypes.undefinedValue || 'my default'

🔸حال بیاییم شرایطی را در نظر بگیریم که فقط در صورت null یا undefined بودن مقدار یک پراپرتی, مقدار پیشفرض مشخص شده, در نظر گرفته شود.چنین شرایطی زمانی که از نوع داده ای متغیر خود آگاه نباشیم, اگر از عملگر || استفاده کنیم باعث بروز رفتار های ناخوسته ای میشود, به عنوان مثال ممکن است مقدار پراپرتی false باشد و بدلیل اینکه hcعملگر || استفاده کردیم, جاوااسکریپت از falsy check برای این منظور استفاده میکند, و باز هم مقدار پیشفرض درنظر گرفته خواهد شد.
در حالی که فقط میخواستیم اگر مقدار پراپرتی null یا undefined باشد, مقدار پیشفرض در نظر گرفته شود.
🔹حل این مشکل در ES11 با عملگر (??) انجام میشود.
در صورتی که مقدار متغیر فقط null یا undefined باشد, مقادیر پیشفرض در نظر گرفته خواهد شد.

✳️ Optional Chaining Operator(Elvis operator)

🔸این عملگر این امکان را فراهم میسازد که زمانی که در حال خواندن پراپرتی های یک آبجکت تو در تو هستید نگرانی ای در مورد وجود داشتن یا نداشتن پراپرتی های آن آبجکت نداشته باشید, اگر آبجکت مربوطه دارای پراپرتی مشخص شده نباشد undefined بازگشت داده خواهد شد.
🔹از این عملگر هم برای مطمئن شدن از وجود داشتن پراپرتی ها و متد ها در آبجت میتوانید استفاده کنید.
در گذشته برای این منظور بدین شکل عمل میکردیم :
const nestedObject = {
firstProp: {
secondProp: {
thirdProp: {
nestedProp: 3
}
}
}
};

if (nestedObject &&
nestedObject.firstProp &&
nestedObject.firstProp.secondProp && nestedObject.firstProp.secondProp.thirdProp && nestedObject.firstProp.secondProp.thirdProp.nestedProp) {
const validPropriety = nestedObject.firstProp.secondProp.thirdProp.nestedProp
console.log(validPropriety) // 3
}

🔹و اما راه حل ES11 آن بدین شکل است :
const checkedProp = nestedObject?.firstProp?.secondProp?.thirdProp?.nestedProp
console.log(checkedProp)

✳️ Promise.allSettled

🔸 این متد که در ES11 اضافه شده، آرایه ای از promise ها دریافت میکند، زمانی که از این متد استفاده میکنید، این متد به عنوان خروجی یک promise باز میگرداند، که شامل ارایه ای از promise های داده شده به آن است و وضعیت reject یا resolve شدن هر یک از promise های داده شده در آن مشخص میباشد، در واقع زمانی که از این متد استفاده میکنید،حتما resolve شدن همه ی promise ها اهمیتی ندارد.

@FullStackDevs

#ES11
#NewFeatures
#java_script

#ادامه

✳️ globalThis

🔸با گذشت زمان جاوااسکریپت رفته رفته تکامل یافت و باعث ورود جاوااسکریپت به محیط های دیگر خارج از مرورگر شد.
بنابرین زمانی که یک کد cross-platform با جاوااسکریپت می نویسید که بروی node و مرورگر و web-workers اجرا شود، در تمام این محیط ها برای دسترسی به گلوبال آبجکت با شئ متفاوتی سروکار دارید.
در مرورگر گلوبال آبجکت به window و در node به global و در web workers گلوبال ابجکت به self اشاره میکند.
و راه حل استانداردی برای دسترسی به صورت یک پارچه در تمام این محیط ها به شی گلوبال آبجکت وجود نداشت.
🔹در ES11 اما با معرفی globalThis میتوانید بسته به محیطی که کد در آن اجرا میشود به گلوبال آبجکت آن محیط دسرسی داشته باشید.

✳️ Private class variables

از ES11 به بعد برای تعریف پراپرتی های private در کلاس ها از # در ابتدای نام پراپرتی ها استفاده میکنیم.
class Something {
#property;

constructor(){
this.#property = "test";
}

#privateMethod() {
return 'hello world';
}

getPrivateMessage() {
return this.#privateMethod();
}
}

✳️ Dynamic import
🔸داینامیک import() یک promise برای ماژول درخواست شده باز میگرداند که میتوانید با استفاده از async/await و await کردن داینامیک import(), ماژول خود را در یک متغیر نگه دارید.
به عنوان مثال میتوانید در زمان برقرار بودن یک شرط ماژول خود را import() کنید:

async function load() {
if(true){
let say = await import('./say.js');
say.hi(); // Hello!
say.bye(); // Bye!
say.default(); // Module loaded (export default)!
}
}

(ویژگی private property در برخی منابع به عنوان ویژگی جدید ES11 معرفی شده بود و در برخی منابع خیر. در این پست اما جهت معرفی وجود چنین ویژگی در جاوااسکریپت آورده شده است)

@FullStackDevs