Rest Parameters (Gom Phần Còn Lại)

Khái niệm

Dùng ...tên ở cuối danh sách tham số để gom mọi đối số còn lại thành một mảng thật (Array).

---

Cú pháp

function fn(first, second, ...rest) { ... }

---

Ví dụ

Gom tất cả

function sum(...nums) {
  return nums.reduce((s, n) => s + n, 0);
}

sum(1, 2, 3);    // 6
sum(10, 20);     // 30
sum();           // 0 (mảng rỗng → giá trị khởi tạo 0)

Gom phần còn lại

function tagLog(tag, ...items) {
  console.log(tag, items);
}

tagLog('DEBUG', 'a', 1, { x: 3 });
// 'DEBUG' ['a', 1, { x: 3 }]
// → tag = 'DEBUG', items = ['a', 1, { x: 3 }]

Thay thế arguments

// ❌ Cũ: dùng arguments (array-like, không có trong arrow)
function old() {
  return Array.from(arguments).join(', ');
}

// ✅ Mới: rest parameters (mảng thật, dùng được trong arrow)
const modern = (...args) => args.join(', ');

old(1, 2, 3);     // "1, 2, 3"
modern(1, 2, 3);   // "1, 2, 3"

---

Rest vs Spread

Đừng nhầm lẫn!

Cùng cú pháp ... nhưng ngữ cảnh khác nhau:

Ngữ cảnh	Tên	Hành vi	Ví dụ
Khai báo hàm	Rest	Gom nhiều đối số → 1 mảng	function f(...args) {}
Lời gọi hàm	Spread	Trải 1 mảng → nhiều đối số	f(...arr)

Rest (khai báo)

// ...nums GOM các đối số lại thành mảng
function sum(...nums) {
  return nums.reduce((s, n) => s + n, 0);
}

Spread (lời gọi)

const arr = [1, 2, 3];
// ...arr TRẢI mảng ra thành các đối số riêng lẻ
sum(...arr); // tương đương sum(1, 2, 3) → 6

Spread trong array/object

// Spread trong array
const a = [1, 2];
const b = [...a, 3, 4]; // [1, 2, 3, 4]

// Spread trong object
const user = { name: 'An' };
const full = { ...user, age: 25 }; // { name: 'An', age: 25 }

---

Quy tắc

Rest phải ở cuối

...rest phải là tham số cuối cùng:

// ✅
function ok(a, b, ...rest) {}

// ❌ SyntaxError
function bad(...rest, last) {}

Mỗi hàm chỉ 1 rest

Không thể có 2 rest parameters:

// ❌ SyntaxError
function bad(...a, ...b) {}

Default trước rest

Thứ tự khuyến nghị: bắt buộc → default → rest:

function api(url, method = 'GET', ...headers) {
  // url: bắt buộc
  // method: có default
  // headers: gom phần còn lại
}

rest ≠ arguments

rest là mảng thật, arguments là array-like:

function demo(a, ...rest) {
  rest.map(x => x);        // ✅ Array
  // arguments.map(x => x) // ❌ TypeError
}

---

Rest trong destructuring

... cũng dùng trong destructuring (không chỉ function parameters):

Array destructuring

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(rest);  // [3, 4, 5]

Object destructuring

const { name, ...others } = { name: 'An', age: 25, role: 'dev' };
console.log(name);   // 'An'
console.log(others); // { age: 25, role: 'dev' }

---

Tóm tắt

Đặc điểm	Chi tiết
Cú pháp	...name ở cuối danh sách tham số
Kiểu dữ liệu	Array thật (có .map(), .filter())
Vị trí	Phải là tham số cuối cùng
Số lượng	Tối đa 1 rest parameter mỗi hàm
fn.length	Không tính rest
Khác arguments	Mảng thật, có trong arrow function
Spread (...arr)	Ngược lại: trải mảng → nhiều giá trị