تازه های جاوااسکریپت در es2020

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

خب میخواستم تو این پست یه مرور کلی داشته باشیم بر روی تازه های جاوااسکریپت در es2020. میدونم که خیلی هاتون از قبل با این ویژگی های جدید آشنایی دارید ولی باز بهشون یه اشاره ی تیتروار میکنم که هم یه مروری برای شمایی که از قبل باهاشون آشنایی داری بشه و هم به شمایی که ازین موضوع اطلاعی نداری کمکی بکنه.

خب همونطور که میدونید هر ساله در یه استاندادری به نام ecma یا اکما (در اصطلاح) میاد و یه سری موارد و فیچر جدید رو برای جاوااسکریپت معرفی میکنه که ازون به بعد در اینترپرتر این زبون مفهوم و قابل استفادس. خب میدونید که استاندارد es6 سطلان تحول در زبون جاوااسکریپت بود و یه عالمه قابلیت اضافه کرد به جاوااسکریپت و بعد ازون هیچ سالی انقدر به این زبون قابلیت اضافه نشده ولی خب این بدین معنی نیست که استانداردهای سالهای بعد چیزی برای ارائه نداشتن.

سال ۲۰۲۰ هم ازین قاعده مستثنا نیست و یه سری قابلیت ها به این زبون محبوب و پر استفاده اضافه کرده. که اینجا تیتر وار و مختصر براتون توضیح میدم.

1.BigInt

یه دیتا تایپ جدیدی به این زبونه اضافه شده به نام بیگ اینت که خب همونطور که از اسمش پیداست و میتونید حدس بزنید دامنه بیشتری از اعداد اینتیجر رو شامل میشه. تا قبل از این ماکسیمم عدد قابل دسترس در جاوااسکریپت عدد ۲ به توان ۵۳

2 pow(53)

بود که برابر 9007199254740992 میشد و میتونستید به این عدد با متغیر

Number.MAX_SAFE_INTEGER

هم استفاده کنید. اگر این عدد رو داخل متغیری میریختید و اون متغیر رو یک واحد اضافه میکردید متوجه میشدید که تغییری تو مقدار متغیرتون شکل نمیگرفت چون این عدد ماکسیمم اینتیجر قابل دسترس در جاوااسکریپت بود. اما خب دیگه الان داستان فرق میکنه و با معرفی بیگ اینت اعداد بزرگتر هم تو جاوااسکریپت قابل دسترسی هستن فقط باید آخر عدد حتما "n" باشه. اینترپرتر جاوااسکریپت با دیدن اون n میفهمه که الان با یه عدد بیگ اینت سر و کار داره. همین مثال چند خط بالایی که زدم رو در نظر بگیرید. اگر شما عدد 9007199254740992 رو تو یه متغیر بریزید و اونو به علاوه یک بکنید چیزی تغییر نمیکنه. اما 9007199254740992n رو میتونید به علاوه یک بکنید و ببینید نتیجه میشه 9007199254740993n.

2.Dynamic Import

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

const tmp = await import('./test')

tmp.testFunction();

3.import.meta

این متد یک آبجکت با یک پراپرتی url از فایل ایمپورت شده بهتون میده (این آبجکت پروتوتایپی نداره و configurable , enumerable و writable عه). فرقی هم نداره که شما این ماژول رو با عبارت import به کدتون آورده باشید یا تو اچ تی ام ال از تگ اسکریپت استفاده کرده باشید. در دو حالت کار میکنه.

<script type=&quotmodule&quot src='./index.mjs?someURLInfo=5' >
new URL(import.meta.url).searchParams.get('someURLInfo'); // 5

// or 

import './index2.mjs?someURLInfo=5';
new URL(import.meta.url).searchParams.get('someURLInfo'); // 5

4.Module Namespace Exports

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

import * as test from './test'

export { test }

که میتونید ازین به بعد خیلی مستقیم اینکارو انجام بدید

export * as test from './test'

5.globalThis

احتمالا از اسمش بتونید حدس بزنیدکه این ویژگی جدید چیه. شما تو جاوااسکریپت تا قبل از این در محیط های مختلف باید از کامند های مختلفی برای دسترسی به this استفاده میکردید.مثلا تو محیط وب و بروزر window استفاده میشد ولی تو وب ورکر ها باید از self استفاده میکردید. حالا با معرفی این آبجکت شما یه متغیر سراسری دارید که همه جا هم بهش دسترسی دارید به نام globalThis.

6.[String].matchAll

میدونید که یه متدی تو جاوااسکریپت داریم به نام match که یه رگولار اکسپرشن میگیره و میگه اون رشته ی ما تو محدودیت های این رگولاراکسپرشن قرار میگیره یا نه. حالا این تابع اینطوری عمل میکنه که تموم حالت هایی که تو محدودیت های رگولاراکسپرشن قرار میگیرن رو به صورت یه آرایه برمیگردونه.

7.Promise.allSettled

خب همونطور که میدونید Promise ها متدی دارن به نام all که یک آرایه از پرامیس هارو میگیره و اونارو اجرا میکنه. حالا اگه در خلال این اجرا یکی از این چند پرامیس به ارور بخوره این متد دیگه ادامه به کار نمیده و کار رو متوقف میکنه. این متد (allSettled) هم به همین صورت عمل میکنه فقط فرقش اینه که اگر یکی از پرامیس ها به ارور بخوره کار ادامه پیدا میکنه و در آخر اگر بعد از این متد .then رو صدا بزنید میبینید که یک آرایه از آبجکت ها برمیگردونه که همشون حاوی فیلدی به نام استتوس هستن . اگر پرامیس با موفقیت به اتمام رسیده باشه وضعیت یا اسستوسش fulfilled و اگر به ارور خورده باشه وضعیت یا استتوسش rejected خواهد بود.

8.Optional Chaining

این ویژگی خیلی بدرد بخوره.تا قبل از این اگه شما میخواستید یه فیلد یا متد از یک آبجکت رو که داخل یک آبجکت دیگه هست رو صدا بزنید و از ارور خوردن برنامتون برای مواقعی که آبجکتتون undefined عه جلوگیری کنید میومدید و اینجوری عمل میکردید.

const obj = { obj2 : { a : '1' }}

if(obj.obj2 !== undefined)

       console.log(obj.obj2.a) /// 1

اما الان میتونید از عملگر .? استفاده کنید. در صورتی که اون آبجکت وجود داشته باشه برنامه اجرا میشه و در صورتی که undefined باشه مقدار undefined برمیگرده و برنامه به اروری نمیخوره. این متد برای صدا زدن فانکشن ها یا در مورد آرایه ها هم کاربرد داره.

console.log(obj.obj3?.someField) ///undefined 

obj.obj2.someFunction?.() /// undefined

9.Nullish Coalescing

خب برای اینکه ببینیم این ویژگی چه مشکلی رو از ما حل میکنه باید یه مثال بزنم. فرض کنید که میخواستید مقادیر falsy رو برای یه متغیر فیلتر کنید.به این صورت که اگر مقدار falsy بود در کنسول چاپ کنه yes.

به این صورت عمل میکنیم.

const [a,b,c] = [0,'',undefined]

a || console.log('yes') //yes

b || console.log('yes') // yes

c || console.log('yes') //yes

خب همینطور که میبینید ۰ و استرینگ خالی هم جزو مقادیر falsy هست. اما اگه بخوایم این کارو فقط با مقادیر nullish انجام بدیم چی؟‌ دیگه این روش قابل استفاده نیست چون ۰ و استرینگ خالی جزو این مقادیر نیستن. در واقع nullish ها این ها هستند: null , undefined

حتی false و NaN که جزو مقادیر falsy هستند هم جزو مقادیر nullish نیستند. برای اینکار این ویژگی و عملگر جدید معرفی شده که کار رو راحت تر میکنه.

 const [a,b,c,d] = [0,'',undefined,null]

a ?? console.log('yes') 

b ?? console.log('yes') 

c ??  console.log('yes') // yes
d ?? console.log('yes') //yes

10.Private Variable

همونطور که میدونید جاوااسکریپت بعد از es6 شی گرایی رو به شکل رایجش میفهمید و قابل استفاده بود. اما وقتی شما یک کلاس در جاوااسکریپت مینوشتید و میخواستید متغیر خصوصی تعریف کنید یکم به مشکل میخوردید. جاوااسکریپت متغیر خصوصی رو نمیفهمید و به شما امکان دسترسی به همه متغیر هارو بیرون ازون کلاس و با ساختن یک شی ازون کلاس بهتون میداد. برنامه نویس ها با گذاشتن قرارهایی مثل اینکه متغیر خصوصی رو با _ تعریف کنید سعی میکردن به هم بفهمونن که این متغیری که اسمش با _ شروع شده یک متغیر خصوصیه و ازش استفاده نکنید.اما الان دیگه میتونید اول اسم متغیرتون یه # بذارید و اینترپرتر جاوااسکریپت اون رو یک متغیر خصوصی میفهمه و دیگه امکان دسترسی بهش رو از بیرون کلاس نمیده.

class book{...

        #private = 'some text';

... }

const b  = new book();

console.log(b.#private) // Error

11.flat ,flatMap

این دو تابع هم به تازگی معرفی شدن و خیلی کاربردی هستن.

تابع flat به شما این امکان رو میده که یک آرایه تو در تو رو تبدیل به یه آرایه معمولی کنید.

const arr = ['1','2',['3','4']]

const flatArr = arr.flat();

console.log(flatArr) /// ['1','2','3','4']

تابع flatMap هم به همین صورت عمل میکنه ولی یه تفاوتی داره اونم اینه که یبار مپ رو روی آرایه اجرا میکنه و تو مواقعی که میخواید تغییراتی در آرایه بدین میتونه خیلی کاربردی باشه.

const arr = ['1','2',['3','4']]

const flatArr = arr.flatMap(a=>a*2);

console.log(flatArr) /// ['2','4','6','8']

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

من این مطلب رو با استفاده از دانش خودم و منابع زیر نوشتم:

• https://www.telerik.com/blogs/latest-features-javascript-ecmascript-2020
• https://dev.to/carlillo/es2020-features-in-simple-examples-1513
• https://kangax.github.io/compat-table/es2016plus/