Destructuring là gì và nó có thể làm gì?

Question

IT Interview Practice · Accepted Answer

**Destructuring** giải nén các giá trị từ mảng hoặc các thuộc tính từ object thành các biến riêng biệt trong một câu lệnh duy nhất, dễ đọc.

```js
// destructuring mảng (theo vị trí)
const [first, second] = [10, 20];      // first=10, second=20
const [a, , c] = [1, 2, 3];            // bỏ qua phần tử giữa → a=1, c=3

// destructuring object (theo tên)
const { name, age } = user;
const { name: userName } = user;        // đổi tên → userName
const { city = "Unknown" } = address;   // mặc định nếu thiếu
```

## Các mẫu mạnh mẽ

```js
// lồng nhau
const { address: { city } } = user;

// rest — lấy phần còn lại
const { id, ...rest } = obj;

// tham số hàm với giá trị mặc định (rất phổ biến)
function createUser({ name, role = "user" } = {}) { ... }

// hoán đổi biến không cần biến tạm
[x, y] = [y, x];
```

## Nơi bạn thấy nó liên tục

```js
// React
const [count, setCount] = useState(0);
function Card({ title, children }) { ... }

// import, response từ API
const { data, error } = await api.get("/users");
```

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

Destructuring loại bỏ code rườm rà (`const name = user.name; const age = user.age;` trở thành một dòng), làm cho chữ ký hàm tự diễn giải (bạn thấy chính xác những prop nào được dùng), và là idiomatic trong JS hiện đại, React, và Node.

Tính năng giá trị mặc định và rest cũng làm cho việc xử lý dữ liệu tùy chọn/một phần trở nên gọn gàng.

Các mẫu mạnh mẽ

Nơi bạn thấy nó liên tục

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

Câu hỏi liên quan