Spread و Rest Operator

سه نقطه‌ای (...) که خیلی بیشتر از چیزی که فکر می‌کنی کاربرد دارن :)

از ES6 به بعد، جاوااسکریپت قابلیت‌هایی اضافه کرد که هدفشون ساده‌ کردن و خواناتر کردن کد هست. یکی از مهم‌ترین این قابلیت‌ها Spread و Rest Operator هستن که هر دو با سه نقطه (...) نوشته می‌شن.

Spread و Rest از نظر ظاهری یکی هستن، اما بسته به جایی که استفاده میشن کاربردشون کاملاً متفاوته.

توی این مقاله، Spread و Rest رو قدم‌به‌قدم و با مثال‌های واقعی بررسی می‌کنیم؛ طوری که بتونی راحت ازشون تو کدت استفاده کنی.

قبل از Spread و Rest (اشتباه رایج و راه‌حل قدیمی)

فرض کن یه آرایه داریم:

const numbers = [1, 2, 3]

حالا می‌خوایم روی این آرایه کار کنیم؛ مثلا:

• یه آیتم جدید اضافه کنیم

• یا یه تغییر «موقت» روی داده‌ها اعمال کنیم

اما نمی‌خوایم آرایه‌ی اصلی تغییر کنه، چون ممکنه همین آرایه جای دیگه‌ای از برنامه هم استفاده شده باشه و تغییرش باعث باگ‌های ناخواسته بشه.

اشتباه رایج:

خیلی وقت‌ها افراد یه متغیر جدید به آرایه اختصاص میدن و فکر می‌کنن نسخه‌ی جدا ساختن:

const copy = numbers
copy.push(4)

اما نتیجه:

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

می‌بینیم آرایه‌ی اصلی هم تغییر کرده!
چرا؟ چون آرایه‌ها و آبجکت‌ها Reference Type هستن؛ متغیرها فقط یه اشاره‌گر به داده‌ی اصلی ایجاد می‌کنن، نه نسخه‌ی مستقل. این رفتار با انواع دیگه داده مثل عدد، رشته یا بولین فرق داره که Value Type هستن و هر بار مستقل کپی میشن.

راه‌حل قدیمی:

قبل از Spread، معمولاً از این روش‌ها استفاده می‌کردیم:

• برای آرایه‌ها: استفاده از slice()

const copy = numbers.slice()
copy.push(4)

• برای آبجکت‌ها: استفاده از Object.assign

const user = { name: "John", age: 30 }
const updatedUser = Object.assign({}, user, { age: 31 })

این روش‌ها کار می‌کردن، ولی کد طولانی میشد و خوانایی نداشت، به خصوص وقتی تعداد آرایه‌ها یا پراپرتی‌ها زیاد می‌شد.

Spread Operator چیه؟

Spread Operator یعنی:
محتویات یک آرایه یا آبجکت رو باز کن و همون‌جا قرار بده.

وقتی می‌نویسیم:

...numbers

در واقع داریم میگیم:
عناصر داخل این آرایه رو یکی‌یکی بیار بیرون.

مثال:

const numbers = [1, 2, 3]
const copy = [...numbers]
copy.push(4)

نتیجه:

numbers // [1, 2, 3]
copy    // [1, 2, 3, 4]

آرایه‌ی اصلی دست‌نخورده باقی مونده؛ و این دقیقاً همون رفتاریه که معمولاً دنبالش هستیم.

استفاده‌های رایج Spread برای آرایه‌ها

1. کپی گرفتن از آرایه

const colors = ["red", "green", "blue"]
const newColors = [...colors]

2. ترکیب چند آرایه

const frontend = ["HTML", "CSS"]
const backend = ["Node", "Laravel"]
const skills = [...frontend, ...backend]

3. اضافه کردن آیتم بدون تغییر آرایه‌ی اصلی

const updatedNumbers = [...numbers, 4]

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

کپی گرفتن از آبجکت

const user = { name: "John", age: 30 }
const newUser = { ...user }

تغییر یا اضافه کردن پراپرتی

const updatedUser = { ...user, age: 31 }

داده‌ی قبلی حفظ می‌شه و فقط مقدار موردنظر تغییر می‌کنه.

Shallow Copy یعنی چی؟

کپی‌ای که با Spread می‌گیریم، Shallow Copy یا «کپی سطحی» حساب میشه.
یعنی:

• فقط لایه‌ی اول کپی میشه

• اگر داخل آبجکت یا آرایه، یه آبجکت یا آرایه‌ی دیگه باشه، اون بخش‌ها هنوز به داده‌های اصلی متصل هستن و جداگانه کپی نمیشن.

مثال:

const user = { name: "John", address: { city: "NY" } }
const copy = { ...user }
copy.address.city = "LA"
console.log(user.address.city) // "LA"

Rest Operator چیه؟

Rest Operator هم با ... نوشته میشه، اما معنی‌ش فرق داره:
هرچی باقی مونده رو جمع کن و بذار توی یه متغیر.

Rest در Destructuring آرایه

const colors = ["red", "green", "blue"]
const [first, ...rest] = colors

first // "red"
rest  // ["green", "blue"]

Rest در پارامترهای فانکشن

function sum(...numbers) {
  let total = 0
  for (const num of numbers) {
    total += num
  }
  return total
}

sum(1, 2, 3)
sum(1, 2, 3, 4, 5)

همه‌ی ورودی‌ها داخل یه آرایه به اسم numbers جمع میشن.

تفاوت Spread و Rest به زبان ساده

• Spread → باز میکنه

• Rest → جمع میکنه

هر دو با ... نوشته میشن، ولی جای استفاده‌شون معنی‌شون رو مشخص میکنه.

جمع‌بندی

Spread و Rest Operator از قابلیت‌های مهم ES6 هستن که:

• کد رو خواناتر و تمیزتر می‌کنن

• جلوی تغییر ناخواسته‌ی داده‌ها رو می‌گیرن

• کار با آرایه‌ها، آبجکت‌ها و فانکشن‌ها رو منطقی‌تر میکنن

اگر تازه وارد ES6 شدی، فهم درست همین سه نقطه‌ی ساده (...) یکی از قدم‌های مهم برای نوشتن کد تمیز و قابل اعتماده.