برسی آخرین تغییرات در جاوااسکریپت ES14

با جاوااسکریپت ES14 به متدهای Immutable برای آرایه ها سلام کنید 😎. یکسری ویژگی های جدید به جاوااسکریپت ES14 یا همان ECMAScript 2023 اضافه شده که کار با آرایه هارو هم راحت تر و هم جذاب تر میکنه.

از این به بعد متدهای toReversed, toSorted, toSpliced, و with رو داریم و این متدها دیگه خود آرایه اصلی رو دستکاری نمیکنند و بجاش یک آرایه جدید برامون ایجاد میکنن. علاوه بر اینا، چندتا متد خفن دیگه هم داریم که الان میخواهیم بریم بطور کامل برسیشون کنیم.

ویژگی های جدید در جاوااسکریپت ES14 چیا هستن ؟

متد toReversed

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

const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.toReversed();

console.log(originalArray); // [1, 2, 3, 4, 5] 
console.log(newArray); // [5, 4, 3, 2, 1]

متد toSorted

مرتب سازی آرایه ها هم با این متد toSorted راحت تر شده و دیگه آرایه اصلی ما دستکاری نمیشه و بجاش یک آرایه جدید برامون ساخته میشه.

const numbers = [4, 2, 5, 1, 3]; 
const sortedNumbers = numbers.toSorted((a, b) => a - b); 

console.log(sortedNumbers); // [1, 2, 3, 4, 5]

متد toSpliced

متد toSpliced جایگزینی بهتر و امن تر برای متد قدیمی splice هست. با این متد میتونیم با خیالی راحت آیتمی را از توی یک آرایه حذف یا جایگزین کنیم و دیگه نگران دستکاری شدن آرایه اصلیمون هم نباشیم.

const numbers = [1, 2, 6, 6, 7];

  const result = numbers.toSpliced(2, 1, 3, 4, 5);
  console.log(result); // [1, 2, 3, 4, 5, 6, 7]

متد with

متد with کار تغییر و دستکاری یک آرایه رو برامون بشدت ساده میکنه. با این متد میتونیم به راحتی index آیتم مدنظر بعلاوه مقدار جدید رو بهش بدیم و بعد بدونه اینکه آرایه اصلیمون دستکاری بشه، یک آرایه جدید با ویرایشی که انجام دادیم رو تحویل بگیریم.

توی مثال زیر گفتیم آیتمی که ایندکسش 2 هست رو با مقدار 3 جابجا کن:

const numbers = [1, 2, 9999, 4];
  const result = numbers.with(2, 3);

  console.log(result); // [1, 2, 3, 4]

متد findLast

متد findLast با یک ترتیب معکوس دنبال آیتمی که بهش گفتیم میگرده و اولین آیتمی که با شرط داده شده جور در بیاد را برای ما return میکنه و اگرهم چیزی پیدا نکنه undefined برامون برمیگردونه.

const array1 = [5, 12, 50, 100, 44];
  const found = array1.findLast((element) => element > 45);

  console.log(found); //Output: 100

متد findLastIndex

این متد هم دقیقا مثل متد قبل عمل میکنه، یعنی میاد با یک ترتیب معکوس، طبق شرطی که بهش دادیم دنبال ایندکس آیتم مدنظرمون میگرده.

const array1 = [5, 12, 50, 100, 44];
const found = array1.findLastIndex((element) => element > 45);

console.log(found); //Output: 3

متد groupBy

تو این نسخه یعنی جاوااسکریپت ES14 یک متد جذاب به نام groupBy یا همان Object.groupBy اضافه شده که به ما اجازه میده به راحتی آرایه خودمون را دسته بندی کنیم. فرض کنید یک آرایه مثل کد زیر دارید:

const products = [
  { name: &quotapples&quot, category: &quotfruits&quot },
  { name: &quotoranges&quot, category: &quotfruits&quot },
  { name: &quotpotatoes&quot, category: &quotvegetables&quot },
];

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

اینکارو به راحتی میتونیم بوسیله متد groupBy به شکل زیر انجام بدیم:

const groupByCategory = Object.groupBy(products, (product) => {
  return product.category;
});

console.log(groupByCategory);
 // خروجی: {
//   'fruits': [
//     { name: 'apples', category: 'fruits' },
//     { name: 'oranges', category: 'fruits' },
//   ],
//   'vegetables': [
//     { name: 'potatoes', category: 'vegetables' }
//   ]
// }

حالا این متد چطور کار میکنه ؟ متد groupBy دوتا ورودی از ما میگیره. ورودی اول که آرایه مدنظرمونه و دومین ورودی هم یک کالبک فانکشن هست. توی ورودی دوم حتما باید نام یک پراپتری که در واقع یک string هست return بشه. دقیقا مثل کد بالا که پراپرتی category را return کردیم.

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

const numbers = [0, 1, 2, 3, 4, 5];

const numbersObj = Object.groupBy(numbers, (num, index) => {
  return num % 2 === 0 ? &quoteven&quot : &quotodd&quot
});

// خروجی
// {
//   &quoteven&quot: [0, 2, 4],
//   &quotodd&quot: [1, 3, 5]
// }

استفاده از Symbols در Weak Collections

قبل از جاوااسکریپت ES14 نیاز بود تا کلید مجموعه هایی مثل WeakSet و WeakMap آبجکت باشن. اما تو این بروزرسانی میتونیم حتی از Symbols هم به عنوان کلید این مجموعه ها استفاده کنیم.

const weakMapIds = new WeakMap();
const key = Symbol(&quotuserId&quot);

weakMapIds.set(key, &quot123abc&quot);
console.log(weakMapIds.get(key)); // 123abc

Hashbang Grammer

Hashbang Grammer به ما اجازه میده تا به راحتی فایل های جاوااسکریپتی را از طریق command line اجرا کنیم. دیگه نیازی به ابزار اضافه ای برای اینکار نداریم و به لطف جاوااسکریپت ES14 میتونیم به راحتی اینکارو انجام بدیم!

#!/usr/bin/env node console.log(&quotJavaScript is greay!&quot);

سخن پایانی

ویژگی های جدیدی که در ECMAScript 2023 یا همان جاوااسکریپت ES14 اضافه شدن کار مارو با آرایه ها راحت تر میکنند. بطور کلی تمرکز اولیه و اصلی این بروزرسانی برروی آرایه ها بوده. یکسری متدها اضافه شدن تا دیگه بدون دغدغه دستکاری شدن آرایه اصلی، بتونیم عملیات مدنظرمون مثل splice یا sort کردن را انجام بدیم و از طرفی دیگه هم متد groupBy اضافه شد تا فرایند دسته بندی کردن یک آرایه را برامون راحت تر کنه. راستی اگرم میخواهید بیشتر درباره جاوااسکریپت و بطور کل فرانت اند یاد بگیرید، توصیه میکنم یک نگاهی هم به دوره آموزش فرانت اند ما  بندازید، ما تو این دوره طبق یک مسیر متفاوت و با پشتوانه یک roadmap خفن فرانت اند را به شما یاد دادیم :)

حتما و حتما هم قبل از استفاده از این ویژگی های جدید، مطمعن بشید که مرورگر یا ورژن NodeJS مدنظرتون این ویژگی را پشتیبانی میکنه یا نه 😀

منبع: https://vaspar.io/blog/javascript-es14