Rest và spread trong JavaScript: giải thích toán tử ...

Cùng cú pháp, hai công việc

Ba dấu chấm ... xuất hiện rất nhiều trong code JavaScript hiện đại, và chúng làm hai việc ngược nhau tùy vào vị trí. Khi đã nhận ra quy luật, mọi cách dùng ... đều rơi vào một trong hai nhóm:

• Rest: ...name ở phía nhận gom nhiều giá trị vào một mảng hoặc đối tượng.
• Spread: ...value ở phía cho trải một mảng hoặc đối tượng ra thành từng phần riêng lẻ.

Đó là toàn bộ mô hình tư duy. Phần còn lại của trang này chỉ là ví dụ cho từng loại, cùng những mẫu code bạn sẽ dùng đi dùng lại.

Tham số rest: gom đối số

Một tham số rest trong định nghĩa hàm gom bất kỳ số lượng đối số (argument) nào thành một mảng thật:

function sum(...nums) {
  let total = 0;
  for (const n of nums) total += n;
  return total;
}

console.log(sum(1, 2, 3));
console.log(sum(10, 20, 30, 40, 50));
console.log(sum());

nums là một mảng bình thường. Bạn có thể .map, .filter, xem .length của nó, truyền nó cho hàm khác: mọi thứ mảng làm được.

Tham số rest có thể đi cùng tham số thường, nhưng tham số rest phải đứng cuối:

function tag(label, ...items) {
  return items.map(item => `[${label}] ${item}`);
}

console.log(tag("todo", "buy milk", "call mom", "write docs"));

label nhận đối số đầu tiên; mọi thứ sau đó rơi vào items. Đặt tham số rest ở bất kỳ đâu khác ngoài vị trí cuối là lỗi cú pháp.

Rest và đối tượng arguments cũ

Code JavaScript cũ dùng một biến đặc biệt tên là arguments bên trong hàm thường. Nó trông giống mảng nhưng không phải mảng, nghĩa là các phương thức mảng không dùng trực tiếp được trên nó. Tham số rest thay thế nó một cách gọn gàng:

function oldStyle() {
  // arguments is array-like, not a real array
  return Array.prototype.slice.call(arguments).map(x => x * 2);
}

function newStyle(...args) {
  return args.map(x => x * 2);
}

console.log(oldStyle(1, 2, 3));
console.log(newStyle(1, 2, 3));

Arrow function thậm chí không có đối tượng arguments, nên tham số rest là cách duy nhất để chúng nhận số lượng đối số thay đổi. Trong code mới, hãy ưu tiên ...args.

Spread trong lời gọi hàm

Spread làm điều ngược lại: nó lấy một mảng và mở ra thành từng đối số riêng ngay tại chỗ gọi.

function greet(greeting, name, punctuation) {
  return `${greeting}, ${name}${punctuation}`;
}

const parts = ["Hello", "Ada", "!"];
console.log(greet(...parts));

const nums = [5, 2, 9, 1, 7];
console.log(Math.max(...nums));

Math.max nhận từng số riêng lẻ, không nhận mảng. Trước khi có spread, bạn phải viết Math.max.apply(null, nums). Giờ chỉ cần một ... là xong.

Để ý rằng cùng một ... là rest trong định nghĩa hàm và là spread trong lời gọi hàm: vị trí cho bạn biết đó là loại nào.

Spread trong literal mảng

Trải vào một literal mảng giúp sao chép hoặc gộp mảng:

const a = [1, 2, 3];
const b = [4, 5, 6];

const copy = [...a];
const joined = [...a, ...b];
const withExtra = [0, ...a, 99];

console.log(copy);
console.log(joined);
console.log(withExtra);

[...a] cho bạn một mảng mới với cùng các phần tử, hữu ích khi bạn muốn sắp xếp hay thay đổi mà không đụng tới mảng gốc:

const scores = [42, 17, 88, 3];
const sorted = [...scores].sort((x, y) => x - y);

console.log(sorted);
console.log(scores);

scores vẫn nguyên vẹn vì .sort chạy trên bản sao. Thói quen nhỏ nhưng lợi ích lớn khi bạn viết code không được có tác dụng phụ bất ngờ.

Spread trong literal đối tượng

Spread cũng dùng được với đối tượng thường, gộp các thuộc tính của chúng vào một đối tượng mới:

const user = { name: "Rosa", age: 30 };
const updates = { age: 31, city: "Lisbon" };

const merged = { ...user, ...updates };
console.log(merged);

Khóa đứng sau thắng. updates.age ghi đè user.age, còn city được mang theo luôn. Thứ tự các lần spread quyết định kết quả, nên hãy nhớ điều này khi xếp chồng giá trị mặc định và giá trị ghi đè:

const defaults = { theme: "light", fontSize: 14 };
const userPrefs = { fontSize: 18 };

const settings = { ...defaults, ...userPrefs };
console.log(settings);

Giá trị mặc định đặt trước, lựa chọn của người dùng đặt sau. Người dùng thắng ở fontSize và kế thừa theme.

Cái bẫy sao chép nông

Spread chỉ sao chép một tầng. Các đối tượng và mảng lồng nhau vẫn được dùng chung giữa bản gốc và bản sao:

const original = { name: "Rosa", tags: ["admin", "editor"] };
const copy = { ...original };

copy.tags.push("owner");

console.log(original.tags);
console.log(copy.tags);

Cả hai mảng đều hiện tag mới vì copy.tags và original.tags là cùng một mảng. Spread không nhân bản danh sách lồng bên trong mà chỉ sao chép tham chiếu.

Để sao chép sâu thật sự dữ liệu thuần, hãy dùng structuredClone:

const original = { name: "Rosa", tags: ["admin", "editor"] };
const deep = structuredClone(original);

deep.tags.push("owner");

console.log(original.tags);
console.log(deep.tags);

Giờ hai mảng đã độc lập với nhau. structuredClone có sẵn trong trình duyệt hiện đại và Node, xử lý được cấu trúc lồng nhau, và là lựa chọn đúng mỗi khi sao chép "nông" là không đủ.

Rest trong destructuring

Rest cũng hoạt động trong destructuring, nơi nó gom các phần tử hoặc thuộc tính còn lại:

const [first, second, ...others] = [10, 20, 30, 40, 50];
console.log(first);
console.log(second);
console.log(others);

const { name, ...rest } = { name: "Rosa", age: 30, city: "Lisbon" };
console.log(name);
console.log(rest);

Lấy ra vài trường và giữ phần còn lại trong một đối tượng là mẫu code phổ biến khi chuyển tiếp props, loại bỏ trường nhạy cảm hoặc tạo phiên bản dữ liệu đã chỉnh sửa:

const user = { id: 1, name: "Rosa", password: "secret", email: "r@example.com" };
const { password, ...safe } = user;

console.log(safe);

password được tách ra (và bỏ qua); safe chứa mọi thứ còn lại. Không thay đổi dữ liệu gốc, không phải sao chép thủ công.

Tóm tắt nhanh

• ...name trong danh sách tham số hoặc mẫu destructuring là rest: nó gom lại.
• ...value trong lời gọi hàm, literal mảng hoặc literal đối tượng là spread: nó trải ra.
• Bản sao bằng spread là nông. Cấu trúc lồng nhau vẫn dùng chung. Dùng structuredClone để sao chép sâu.
• Tham số rest là mảng thật: hãy dùng chúng thay cho arguments.
• Trong literal đối tượng, spread đứng sau ghi đè spread đứng trước, đó là cách tạo giá trị mặc định kèm giá trị ghi đè.

Tiếp theo: closure

Hàm trong JavaScript không chỉ nhận đầu vào và trả về đầu ra: chúng còn ghi nhớ phạm vi nơi chúng được định nghĩa. Sự ghi nhớ đó gọi là closure, và nó là cơ chế đứng sau callback, hàm factory và phần lớn các mẫu code bạn sẽ gặp ở trang tiếp theo.