امکانات جدید JavaScript در ECMAScript نسخه ۲۰۲۱

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

بریم سراغش که ببینیم داستان چیه. چیا امسال معرفی شده؟

• جداکننده های اعداد (Numeric Separators)
• جایگزینی همه متن ها توی رشته (String replaceAll)
• عملگرهای منطقی جدید (Logical assignment operator)
  - عملگر And & Equals (&&=)
  - عملگر OR & Equals (||=)
  - عملگر Nullish Coalescing & Equals (??=)
• دستور Promise.any
• متدهای خصوصی کلاس (Private class methods)
• متدهای Getter و Setter خصوصی (Private Getters and setters)
• ارایه WeakRef
• ارایه Finalizers

بنظر میاد موارد جذابی هستن. حالا بریم سراغ اینکه هر کدوم رو باهم بررسی کنیم.

جداکننده های اعداد (Numeric Separators)

مثلا عدد 100000000000 رو در نظر بگیرید. فرض کنید میخوایم این رو تو کد بذاریم بعد یه دو دقیقه ببینیم این عدد رو درست نوشتیم یا نه. بنظر سخت نیست؟ حالا بشمارید ببینیم چند تا صفر داره!

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

خوب الان میتونیم این کارو بکنیم و عددا رو از هم جدا کنیم بدون اینکه مشکلی توی خروجی و حساب و کتابمون پیش بیاد. یه سری نمونه ببینیم:

const amount = 1_000_000_000;
// دو میلیارد که توی متغیر 1000000000 ذخیره شده

const amount = 1_475_938.38;
// توی متغیر در واقع 1475938.38 ذخیره شده

const amount = 62345_00;
// اینطوری دلار و سنت رو نگه میداریم

const amount = 1_734_500;
// 1,734,500

const amount = 2e30_000;
// 20^30000

جایگزینی همه متن ها توی رشته (String replaceAll)

این دستور replace که قبلا اومده بود همش من میگفتم خوب اینا که replace رو نوشتن چرا کاری نکردن یه دستور دیگه هم بدن که همه رشته ها رو جایگزین کنه که بالاخره تونستم فقط با فکر کردن این رو اضافه کنم!

همیشه با استفاده از regex میومدیم و replaceAll رو شبیه سازی میکردیم که از (/regex/g) استفاده می کردیم و بد هم نبود. اما حالا دیگه لازم نیست کار اضافی کنیم و میتونیم از replaceAll استفاده کنیم تا همه مواردی که میخوایم رو توی یه رشته بزرگ تغییر بده.

const message = 'replace+all+is+in+access+now';
const messageWithSpace = message.replaceAll('+', ' ')
// replace all is in access now

عملگرهای منطقی جدید (Logical assignment operator)

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

عملگر اگه درست بود مقدار رو بذار تو متغیر :)

And & Equals (&&=)

یه کدی هست که همه خیلی ازش استفاده می کنیم. اونم اینه که یه شرطی رو چک میکنیم و اگه مثلا اون شرط درست بود میایم یه مقدار رو set میکنیم داخل متغیر.

این همون دستوره. در واقع بهتره تو کد توضیح بدیم. کد زیر رو ببینید:

let myVar = 1;
if(a){
   myVar = 25;
}
// خروجی این کد اینه که مقدار متغیر ما الان برابر ۲۵ هستش

حالا این کد رو میتونید خیلی راحت با کد زیر تغییرش بدید و خیلی تر و تمیز ترش بکنید:

let a = 1;
a &&= 3

بعدی باحال تره ...

اگه مقدار توی متغیر نادرست بود یه چیز دیگه بذار تو متغیر!

OR & Equals (||=)

قبلا واسه اینکه چک کنید یه متغیر مقدار داره یا نه و اگه مقدار اون درست نبود یه مقدار دیگه set میکردید چطوری کد می نوشتید؟ یه چیزی شبیه موارد زیر بود:

let myVar = undefined;
if(!myVar){
   myVar = 5;
}
//شرط بالا چک  میکنه که متغیر اگه مقدار درستی نداشت عدد ۲۵ رو توش قرار بده
// و توی مثال بالا مقدار متغیر قراره ۲۵ باشه

// یا اینکه این کد رو می نوشتید
myVar = myVar || 25;
// مقدار توی متغیر بازم ۲۵ هستش

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

let myVar = 0;
myVar ||= 25;
//اینجا هم چک میکنه اگه مقدار متغیر ما درست نباشه میاد و ۲۵ رو میذاره داخل متغیر

توجه کنید که توی این دستور truthy بودن مهمه یعنی اگه مقدار myVar برابر با رشته خالی, صفر, undefined یا null و هر چیزی باشه مقدار داخل متغیر ۲۵ میشه.

اگه هیچ مقداری نداشتیم یه مقدار رو متغیر اختصاص بدیم!

Nullish Coalescing & Equals (??=)

حالا اینجا یه چیز متفاوت با ||= داریم و اون اینه که با دستور ??= فقط زمانی که متغیر بصورت undefined یا null باشه مقدار مورد نظرتون بهش اختصاص داده می شه.

let myVar = undefined;
myVar ??= 25

دستور Promise.any

با استفاده از Promise.any قراره که هروقت هرکدوم از promiseها تکمیل شد بریم سراغ باقی ماجرا. اگه همه promiseها هم خطا بدن یه استثنا یا exception اتفاق میافته که AggregateError هستش.

const firstPromise = new Promise((resolve, reject) => {
  setTimeout(() => reject(), 1000);
});

const secondPromise = new Promise((resolve, reject) => {
  setTimeout(() => reject(), 2000);
});

const thirdPromise = new Promise((resolve, reject) => {
  setTimeout(() => reject(), 3000);
});

try {
  const first = await Promise.any([
    firstPromise, secondPromise, thirdPromise
  ]);
  // هر کدوم از موارد که تکمیل بشه
} catch (error) {
  console.log(error);
  // AggregateError: اگه همه موارد خطا بده
}

متدهای خصوصی کلاس (Private class methods)

قبل ترا برای اینکه متد خصوصی درست کنیم از _ جلوی اسمش استفاده می کردیم ولی در واقع این کار تضمین نمیکنه که حتما خصوصی باشه. اما توی نسخه ۲۰۲۱ این مورد رو حل کردن و یه # جلوی اسم متد اضافه کردن. اگه از # جلوی اسم متد استفاده کنید خصوصی میشه و تضمین هم میکنه که حتما خصوصی باشه.

یه مثال هم اینجا بزنیم:

class Test {
  #addTestRunner(testRunner){
    this.testRunner = testRunner
  }
}

const test = new Test();
test.addTestRunner({name: 'test'});

// خروجی میشه این خطا: TypeError: test.addTestRunner is not a function

متدهای Getter و Setter خصوصی (Private Getters and setters)

تو نسخه ۲۰۲۱ اومدن و Getter و Setter رو هم خصوصی کردن که اینا رو هم با همون # میتونید خصوصی کنید و حالش رو ببرید.

class Test {
  get #name(){
    return 'test-name';
  }
}

const test = new Test();
test.name
// خروجی: undefined

دستور WeakRef و Finalizers

این دوتا دستور رو به نظرم رسید بهتره یه مقاله جدا براش بنویسم تا بتونم بیشتر و کامل تر توضیح بدم. پس تو مقاله های بعدی منتظر این دوتا باشید که باهاشون بیشتر آشنا بشید.

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