Toán tử spread và rest là gì?

Question

Accepted Answer

Cả hai đều dùng `...` nhưng theo **hai hướng ngược nhau**: spread **mở rộng** một tập hợp thành các phần tử riêng lẻ; rest **gom** các phần tử vào một mảng/object duy nhất.

## Spread — mở rộng

```js
const a = [1, 2], b = [3, 4];
const merged = [...a, ...b];          // [1, 2, 3, 4]
const copy = [...a];                   // sao chép nông (shallow copy)
const obj = { ...user, active: true }; // sao chép object + ghi đè/thêm một trường
Math.max(...[1, 5, 3]);                // 5 — spread mảng thành các đối số
```

## Rest — gom

```js
function sum(...nums) {     // gom tất cả đối số vào một mảng
  return nums.reduce((a, n) => a + n, 0);
}
sum(1, 2, 3);               // 6

const [first, ...others] = [10, 20, 30]; // first=10, others=[20, 30]
const { id, ...rest } = user;            // lấy id ra, giữ phần còn lại
```

## Một chi tiết quan trọng: spread là sao chép NÔNG (SHALLOW)

```js
const original = { user: { name: "Ann" } };
const copy = { ...original };
copy.user.name = "Bob"; // ⚠️ cũng thay đổi original.user.name — object lồng nhau được CHIA SẺ
```

Spread chỉ sao chép cấp cao nhất; các object lồng nhau vẫn là tham chiếu được chia sẻ. Với cập nhật state bạn thường chỉ thay đổi cấp cao nhất, điều đó ổn, nhưng hãy lưu ý đối với các cấu trúc sâu.

## Tại sao điều này quan trọng

Spread là cách chuẩn để thực hiện **cập nhật bất biến** (sao chép + thay đổi) trong React/Redux, và rest làm cho các hàm variadic và destructuring "lấy phần còn lại" trở nên gọn gàng.