Spread Operator در جاوا اسکریپت

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

در این مطلب قصد دارم به صورت کامل و مرحله به مرحله، همه چیز درباره‌ی Spread Operator در جاوا اسکریپت را توضیح بدهم. اگر تازه‌کار هستید یا حتی سال‌هاست با جاوا اسکریپت کار می‌کنید، مطمئنم نکته‌هایی پیدا می‌کنید که به کارتان بیاید.

Spread Operator چیست؟

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

مثال ساده:

const numbers = [1, 2, 3];
console.log(...numbers); // خروجی: 1 2 3

اینجا آرایه‌ی numbers باز شده و هر عنصر به صورت جداگانه چاپ می‌شود.

کاربردهای Spread Operator در آرایه‌ها

1. کپی کردن آرایه

قبلاً اگر می‌خواستیم یک آرایه را کپی کنیم باید از متدهایی مثل slice() استفاده می‌کردیم. حالا خیلی راحت با Spread:

const arr1 = [10, 20, 30];
const arr2 = [...arr1];

console.log(arr2); // [10, 20, 30]
console.log(arr1 === arr2); // false (دو آرایه‌ی مجزا هستند)

نکته: این کپی فقط سطحی (shallow copy) است. یعنی اگر داخل آرایه آبجکت‌های تو در تو داشته باشید، فقط مرجع آن‌ها کپی می‌شود.

2. ترکیب آرایه‌ها (Array Concatenation)

به جای استفاده از concat، می‌توانیم چند آرایه را خیلی ساده ترکیب کنیم:

const fruits = ["apple", "banana"];
const moreFruits = ["orange", "kiwi"];

const allFruits = [...fruits, ...moreFruits];
console.log(allFruits); // ["apple", "banana", "orange", "kiwi"]

3. افزودن عناصر جدید

با Spread می‌توانیم به راحتی مقادیری را قبل یا بعد از آرایه اضافه کنیم:

const base = [2, 3, 4];
const extended = [1, ...base, 5];

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

کاربردهای Spread Operator در آبجکت‌ها

از نسخه‌ی ES2018 به بعد، Spread Operator برای آبجکت‌ها هم معرفی شد. این یعنی حالا می‌توانیم خیلی راحت آبجکت‌ها را ترکیب یا کپی کنیم.

1. کپی آبجکت

const user = { name: "Sara", age: 25 };
const newUser = { ...user };

console.log(newUser); // { name: "Sara", age: 25 }
console.log(user === newUser); // false

باز هم توجه داشته باشید که این کپی سطحی است.

2. ترکیب چند آبجکت

اگر بخواهید خصوصیات چند آبجکت را در هم ادغام کنید، Spread راه خیلی ساده‌ای است:

const person = { name: "Ali", age: 30 };
const job = { title: "Developer", company: "TechCorp" };

const employee = { ...person, ...job };
console.log(employee);
// { name: "Ali", age: 30, title: "Developer", company: "TechCorp" }

3. بازنویسی خصوصیات

اگر خصوصیات مشترک داشته باشید، آخرین مقدار جلوی قبلی را می‌گیرد:

const obj1 = { name: "Reza", age: 20 };
const obj2 = { age: 25, city: "Tehran" };

const result = { ...obj1, ...obj2 };
console.log(result); // { name: "Reza", age: 25, city: "Tehran" }

استفاده از Spread در توابع

یکی از جذاب‌ترین کاربردهای Spread این است که می‌توانیم عناصر یک آرایه را به عنوان ورودی‌های یک تابع پاس بدهیم.

function sum(a, b, c) {
  return a + b + c;
}

const nums = [5, 10, 15];
console.log(sum(...nums)); // 30

این خیلی بهتر از نوشتن sum(nums[0], nums[1], nums[2]) است.

تفاوت Spread Operator با Rest Parameter

شاید کمی گیج‌کننده باشد چون هر دو با ... نوشته می‌شوند. اما Spread و Rest دو چیز کاملاً متفاوت هستند:

• Spread: برای باز کردن آرایه یا آبجکت استفاده می‌شود.

• Rest: برای جمع کردن چند مقدار در قالب یک آرایه استفاده می‌شود.

مثال Rest:

function multiply(factor, ...numbers) {
  return numbers.map(num => num * factor);
}

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

اینجا ...numbers تمام ورودی‌های اضافی را در قالب یک آرایه جمع کرده است.

محدودیت‌ها و نکات مهم Spread Operator

1. کپی سطحی (Shallow Copy):
   اگر با داده‌های تو در تو (nested) سر و کار دارید، باید حواستان باشد که Spread فقط سطح اول را کپی می‌کند.

   const obj = { user: { name: "Sara" } };
   const copy = { ...obj };
   
   copy.user.name = "Ali";
   console.log(obj.user.name); // "Ali" (تغییر در هر دو اعمال شده)
   

2. ترتیب اهمیت دارد:
   وقتی چند آبجکت یا آرایه را ترکیب می‌کنید، ترتیب قرارگیری Spread اهمیت دارد و مقادیر بعدی روی مقادیر قبلی overwrite می‌شوند.

3. قابل استفاده فقط در iterableها:
   برای آرایه‌ها و آبجکت‌ها کار می‌کند، ولی روی چیزهایی مثل اعداد مستقیم یا null جواب نمی‌دهد.

در نهایت

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

اگر تازه شروع کرده‌اید، پیشنهاد می‌کنم در پروژه‌های کوچک استفاده کنید تا به مرور دستتان بیاید. و اگر حرفه‌ای هستید، مطمئنم می‌توانید با استفاده خلاقانه از Spread Operator کدهایی بنویسید که نگه‌داری‌شان خیلی راحت‌تر باشد.