پارامترهای Rest و سینتکس Spread

مقدمه

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

پارامترهای Rest در تعریف تابع

برای تعریف پارامتر Rest کافیست در انتهای لیست پارامترهای تابع، سه نقطه و یک نام انتخابی بنویسید. این پارامتر همه آرگومان‌های اضافی را به صورت آرایه ذخیره می‌کند. در مثال زیر تابع sum می‌تواند هر تعداد عدد را جمع کند.

JAVASCRIPT

function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

console.log(sum(1, 2));      // 3
console.log(sum(1, 2, 3, 4)); // 10

در این کد، پارامتر ...numbers هر تعداد آرگومان را به صورت آرایه جمع‌آوری می‌کند و سپس با متد reduce همه را جمع می‌زند. بنابراین تابع sum به طور دینامیک با هر تعداد عدد کار می‌کند.

نکات مربوط به پارمتر Rest

در مورد پارمتر Rest و استفاده از آن، چند نکته هست که باید مورد توجه قرار داده شود:

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

در مثال بالا تابع sum فثط یک پارامتر دارد که آن هم از نوع Rest است اما در مثال زیر تابعی داریم که یک پارامتر معمولی و یک پارامتر از نوع Rest دارد.

JAVASCRIPT

function showInfo(name, ...skills) {
    console.log(name);
    console.log(skills);
}

showInfo("reza", "JS", "HTML", "CSS");
// "reza"
// ["JS", "HTML", "CSS"]

در این مثال، آرگومان اول در پارامتر name و بقیه آرگومان‌ها به صورت آرایه در skills قرار می‌گیرند.

عملگر Spread برای آرایه‌ها و اشیا

عملگر Spread با همان سه نقطه (...) در موقعیت‌های دیگر معنی "گسترش" می‌دهد. یعنی مقدار یک آرایه یا شیء را باز می‌کند و عناصرش را تک‌تک وارد ساختار جدید می‌کند. با Spread می‌توانید یک آرایه را کپی یا با آرایه دیگر ترکیب کنید:

JAVASCRIPT

let a = [1, 2];
let b = [3, 4];
let c = [...a, ...b, 5];
console.log(c); // [1, 2, 3, 4, 5]

این کد آرایه‌های a و b را با استفاده از عملگر Spread ترکیب می‌کند و در نهایت مقدار 5 را هم اضافه می‌کند. این روش برای ادغام آرایه‌ها و ایجاد آرایه جدید بسیار خوانا و سریع است.

می‌توانید اشیا را نیز به سادگی کپی یا با هم ترکیب کنید. مانند مثال زیر:

JAVASCRIPT

let person = { name: "ali" };
let user = { ...person, age: 22 };
console.log(user); // { name: "ali", age: 22 }

در این مثال شیء user همه پراپرتی‌های person را با استفاده از spread به ارث می‌برد و پراپرتی age را نیز به آن اضافه می‌کند. این روش بسیار مناسب برای کپی عمیق (clone) اشیاء به روشی ساده است.