اکمااسکریپت ۲۰۲۱ و ویژگی های جدید JS

سلام مجدد خدمت همه شما دوستان و همراهان گرامی

من امید مقدسی، امروز با یک مقاله آموزشی دیگه اومدم به خونه های شما

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

یک نکته مهم

خب ی نکته مهمی که باید بهش توجه کنید، مرورگر های قدیمیه.

همینطور که میدونید، قرار نیس که کدی که ما مینویسیم فقط روی مرورگر خودمون اجرا بشه و لزوما همه کاربران مثل ما بیان و از آخرین نسخه مرورگر ها استفاده کنن. امان از دست این کاربرای قدیمی

خب حالا چاره چیه؟ چاره استفاده از ی ابزاریه که بیاد و کد های بروزی که ما مینویسیم رو به کد های قدیمی تبدیل کنه. اسمش چیه؟ babel، بله اینم استاد بزرگوار که میاد و کد ها و ویژگی های جدید جاوااسکریپت رو تبدیل میکنه به کد های قدیمی تا توی مرورگر های قدیمی هم کدمون به خوبی کار کنه.

حالا از بحث زیاد خارج نشیم اصن ما اومدیم راجب قابلیت های جدید صحبت کنیم رسیدیم به babel.

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

خب بریم سراغ ویژگی های جدید اکمااسکریپت ۲۰۲۱ و باهم دیگه در کنار هم بررسیشون کنیم.

۱. Logical Assignment Operators یا عملگرهای انتساب منطقی

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

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

• And & Equals (&&=)

خب حالا این چی هست که من نوشتم؟ این عمگر وقتی عمل میکنه که مقدار درست باشه. میدونم هیچی نفهمیدین ولی خب وقتی ی مثال بزنم درکش میکنین. (شرمنده از فن بیان افتضاحم?)

خب بریم ی مثال بزنم که راحت درکش کنیم.

قبلا ما ی کدی به صورت زیر می نوشتیم.بگین خب

let x = 1;
if(x){
 x = 10;
}

که خروجیش میشد چی

x=10

درسته؟ خب حالا اینطوری میتونی بنویسیش

let x = 1;
x &&= 10;

اینم خروجیش میشه همون x=10

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

• OR & Equals ( ||= )

خب این عملگر دقیقا برعکس قبلیه یعنی اگه متغیر x برابر با false باشه عملیات انتساب اتفاق میوفته. خب بریم ی مثالم ازش بزنیم که بعد نگیم پ مثالش کو.

let x = 0;
x ||= 10

که خروجیش میشه x=10

سریع بریم سراغ بعدی که کلی حرف داریم.

Logical nullish assignment (??=)

خب این کی اتفاق میوفته؟ این یکی شاید بیشتر به کار بیاد چون زمانی عملیات انتساب اتفاق میوفته که مقدار x برابر با null یا undefined باشه. بریم ی مثالم بزنم که قشنگ دستتون بیاد کع قضیه از چه قراره.

// Example 1: x is nullish
let x
const y = 'Chuck Norris'
// ✅ x is assigned 'Chuck Norris'
x ??= y

// Example 2: x is not nullish
let x = 1
const y = 2
// ? x is not assigned 2, its value remains 1
x ??= y 

// Translates to this
x ?? (x = y)
// or this
if (x === null || typeof x === 'undefined') {
    x = y
}

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

خسته نشدین از این همه عملگر؟ خب خبر خوش اینکه عملگر ها تموم شد. بریم سراغ بعدیا☺️

۲. جداکننده های عددی

برای بهبود خوانایی و جداسازی گروه های اعداد، حروف الفبای عددی از زیرخط به عنوان جداکننده استفاده می کنیم. به سادگی میتونیم با استفاده از _ یا زیرخط بدون تغییر در عملکرد اعداد، به خوانایی اعداد بزرگ اضافه کنیم. حالا چطوری؟ مثالشو براتون پایین گذاشتم.

// Before
const bigNumber = 19432482347 // => ??? hard to read

// Now
const readableBigNumber = 19_432_482_347 // here we go, much better ?

بهتر شد؟

۳.String.replaceAll

تا قبل از این متد ما یک متد دیگه به اسم replace داشتیم که میومد و توی متن اولین مقداری که پیدا میکرد رو با چیزی که ما توی پارامتر دومش داده بودیم جایگزین میکرد اما اگه میخواستیم که بیاد و توی کل متن بگرده و تمامی مورد های مشابه رو جایگزین که، باید میومدیم و از عبارات با قاعده یا همون RegEx خودمون استفاده کنیم. مثل مثالی که زیر آوردم

// String.prototype.replace (searchValue, replaceValue)

const str = "This is a test, I repeat, this is a test"
str.replace(/test/g, 'success')
// output: This is a success, I repeat, this is a success

همچنین ترفندی هم بود که میشد با استفاده از متد split و join استفاده کرد.

str.split('test').join('success')
// output: This is a success, I repeat, this is a success

خب دیگه وفتشه که همه ترفند هایی که بلد بودین رو بریزین دور چون دیگه متدش اومد ?

str.replaceAll('test', 'success')
// output: This is a success, I repeat, this is a success

بفرمایید. بازم بگین من بد آدمیم. این همه چیز خوب یادتون میدم?

۴.Promise.any

وای چقد سخته بخوای اینجور مباحث رو به فارسی توضیح بدی. (نیست من چند سال خارج بود فارسی کم تونست صحبت ??)

خب دیگه شوخی بسه، بریم سراغ ادامه ماجرا. (ولی خدایی خیلی سخته بخوای تایپ کنی و توضیح بدی ?)

دستوری را برمی گردونه که به محض حل شدن یکی از دستورها برطرف می شود. این متد برعکس متد ()Promise.all که منتظر می موند تا همه دستورها قبل از خروجی حل شوند.

وقتی همه دستورها رد شوند چه اتفاقی می‌افتد، متد یک استثنای AggregateError با دلیل رد کردن ایجاد می‌کند. من کد را در یک بلوک try-catch نوشته ام. فقط امیدوارم که متوجه بشید.

Promise.any([
  fetch('https://v8.dev/').then(() => 'home'),
  fetch('https://v8.dev/blog').then(() => 'blog'),
  fetch('https://v8.dev/docs').then(() => 'docs')
]).then((first) => {
  // Any of the promises was fulfilled.
  console.log(first);
  // → 'home'
}).catch((error) => {
  // All of the promises were rejected.
  // AggregateError: If all promises were rejected
  console.log(error);
});

واقعا از صمیم قلب آرزو میکنم درک کرده باشید ?.خب اشکالم نداره اگه درکش نکردین. الان ی توضیح کوتاه میدم.ببینید، کد وارد متن promise.any میشه و اولین خروجی که داخلش برگرده اون مقدار first اجرا میشه و اگه در نهایت همشون به خطا بوخورن و هیچکدوم اجرا نشن میره سراغ error، همین.

۵.متدهای کلاس خصوصی

متدهای خصوصی فقط در داخل کلاس محدوده دارند، بنابراین خارج از کلاس، قابل دسترسی نیستند.درسته؟ خب ما قبلا برای اینکه متد رو خصوصی بنویسیم اینطوری مینوشتیم:

class GfG {
 showMe() {
   console.log("I am a omid")
 }
 #notShowMe() {
   console.log("Hidden informations")
 }
}
 
const gfg = new GfG()
 
gfg.showMe()
gfg.notShowMe()

خب خروجی چی میشه؟ اگه گفتین؟ نمیخواد خودم میگم:

gfg.notShowMe is not a function

بفرما، خو معلوم بود خطا میده دیگه.

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

class GfG {
 showMe() {
   console.log("I am a omid");
 }
 #notShowMe() {
   console.log("Hidden informations");
 }
 showAll() {
   this.showMe()
   this.#notShowMe();
 }
}
 
const gfg = new GfG();
gfg.showAll();

من یک متد عمومی جدید به نام ()showAll در کلاس GfG ایجاد می کنیم. از این متد عمومی می تونم به متد ()private #notShowMe دسترسی داشته باشیم و از آنجایی که متد جدید ما عمومی است نتیجه زیر را دریافت می کنیم. اینم میشه خروجی:

I am a omid
Hidden informations

 

۶. دریافت کننده ها و تنظیم کننده های خصوصی

درست مثل متدهای خصوصی، از الان می تونیم دریافت کننده ها و تنظیم کننده ها را طوری بسازیم که فقط در داخل یک کلاس یا با استفاده از نمونه ایجاد شده قابل دسترسی باشند. بریم ببینیم کدش چطوری میشه:

class GfG {
 get #Name() {
   return "omoghadasi"
 }
 
 get viewName() {
   return this.#Name
 }
}
 
let name = new GfG();
console.log(name.viewName);

که خروجیشم چیزی نیست جز:

omoghadasi

کلام آخر

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