بررسی عملگر (...) Spread در جاوااسکریپت

درود دوستان?! می‌خوایم با عملگر Spread آشنا بشیم که از ES6 به جاوااسکریپت اضافه شده و کاربردهای جالب و زیادی داره.

موارد زیر رو توی این قسمت یاد می‌گیریم:

• عملگر Spread چیه
• عملگر Spread و مقادیر قابل پیمایش
• عملگر Spread و آبجکت‌ها
• پارامتر رست (Rest) و عملگر Spread

عملگر Spread چیه؟

معنی تحت‌اللفظی این Spread یعنی پخش کردن. این عملگر که به صورت سه‌نقطه ... هست، قبل از یک مقدار قابل پیمایش (Iterable) مثل یک آرایه قرار می‌گیره و اعضای اون رو پخش می‌کنه توی یک چیز دیگه مثل ورودی‌های یک تابع یا یک آرایه.

توی این مثال می‌خوایم اعضای یک آرایه رو پخش کنیم توی ورودی‌های یک تابع:

function add(a, b, c) {
  console.log(a); // 1
  console.log(b); // 2
  console.log(c); // 3
}
const numbers = [1, 2, 3];

add(...numbers);

توی این کد و توی خط ۸ ما اعضای آرایه numbers رو پخش کردیم توی ورودی‌های تابع add. انگار چنین کاری انجام دادیم:

add(1, 2, 3);

همونطور که می‌بینیم بجای اینکه به صورت دستی ورودی‌ها رو پاس بدیم، این کار رو به صورت خودکار با عملگر Spread انجام دادیم ? ارزش این ویژگی توی این مثال زمانی پر رنگ‌تر میشه که آرایه‌هامون اعضای بیشتری داشته باشن و یا تعداد ورودی‌های تابع معین نباشه.

به غیر از ورودی‌های توابع، ما می‌تونیم اعضای یک آرایه رو پخش کنیم توی یک آرایه دیگه:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const merged = [...arr1,...arr2];

console.log(merged); // 1,2,3,4,5,6

توی این کد، اعضای آرایه‌های arr1 و arr2 توی یک آرایه جدید به اسم merged پخش شدن. به کاری که انجام دادیم به اصطلاح گفته میشه ادغام کردن (Merge) دو آرایه. در واقع انگار چنین آرایه‌ای ساختیم:

[1, 2, 3, 4, 5, 6];

عملگر Spread و مقادیر قابل پیمایش

ما تا الان این پارامتر رو فقط برای آرایه‌ها استفاده کردیم. اما بالاتر گفتیم که این عملگر برای پخش کردن یک مقدار قابل پیمایش یا Iterable توی یک چیز دیگه استفاده میشه.

مقدار قابل پیمایش (Iterable) به مقداری گفته میشه که می‌تونه به راحتی توی حلقه for...of قرار بگیره تا بتونیم روی اعضای اون حلقه بزنیم.

توی جاوااسکریپت آرایه‌ها معروف‌ترین مقدارهای قابل پیمایش هستن. اما باید بدونیم مقادیر دیگه‌ای مثل رشته‌ها و آبجکت Set هم قابل پیمایش هستن که عملگر Spread می‌تونه برای همه این مقادیر استفاده بشه:

const chars = [...&quotHello&quot];

console.log(chars); // [&quotH&quot, &quote&quot, &quotl&quot, &quotl&quot, &quoto&quot]

عملگر Spread و آبجکت‌ها

ما می‌تونیم از این عملگر برای آبجکت لیترال‌ها (Object Literal) (آبجکت‌هایی که با {} ساخته میشن) هم استفاده کنیم. این کار برای پخش کردن پراپرتی‌های یک آبجکت توی یک آبجکت دیگه استفاده میشه:

const obj1 = { a: 1, b: 2 };

const cloned = {...obj1};

console.log(cloned);
console.log(cloned.a); // 1

الان آبجکت cloned دقیقاً شامل پراپرتی‌هایی میشه که آبجکت obj1 داره. به کاری که کردیم به اصطلاح گفته میشه کپی یا کلون (Clone) کردن یک آبجکت.

یک نکته هم که باید ذکر کنم این است که هنگام تغییر مقدار پراپرتی در یک آبجکت با استفاده از عملگر Spread این تغییر فقط برای آن پراپرتی حفظ می‌شد و برای پراپرتی اصلی لحاظ نمی‌شود یعنی مثل دفعات قبلی که مقدار رفرنس‌ها حتی با تغییر دادن آن مقدار اصلی پراپرتی نیز تغییر می‌کرد با استفاده از این قابلیت عملگر Spread می‌توان جلوی این کار را گرفت (با مثالی که خواهم زد منظورم را متوجه خواهید شد، پس نگران نباشید)

مثال:

const restaurant = {
nameRestaurant: 'Classico Italiano',
location: 'Via Angelo Tavanti 23, Firenze, Italy',
categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
mainMenu: ['Pizza', 'Pasta', 'Risotto'],
};

const restaurantCopy = { ...restaurant };
restaurantCopy.nameRestaurant = 'Hossein Resturant';

console.log(restaurantCopy.nameRestaurant); // Hossein Resturant
console.log(restaurant.nameRestaurant); // Classico Italiano

پارامتر رست (Rest) و عملگر Spread

دیدیم که عملگر Spread ظاهری کاملاً مشابه با پارامتر رست داره. اما باید بدونیم که پارامتر رست فقط توی پارامتر توابع دیده میشه. یعنی اگه توی پارامترهای یک تابع یک سه‌نقطه ... دیدیم، اون پارامتر رست هست:

// Rest parameter
function add(...numbers) { }

// Spread operator
add(...[1, 2, 3]);

در واقع توی خیلی از شرایط این دو می‌تونن ترکیب بشن:

const add = (...numbers) => (
  numbers.reduce((acc, item) => acc + (+item), 0)
);

const input = prompt(&quotEnter numbers in format: 1,2,...&quot, &quot3,5,7&quot);

console.log(
  add(...input.split(','))
);

خب دوستان با عملگر Spread آشنا شدیم و دیدیم که با اون می‌تونیم کدهایی خواناتر و البته کم‌حجم‌تر داشته باشیم. امیدوارم از این قسمت هم استفاده کرده باشین. روزتون خوش ?✌️

Resources: developer.mozilla.org