Destructuring

Destructuring trong JavaScript là một cú pháp đặc biệt cho phép bạn "mở gói" (unpack) các giá trị từ mảng hoặc các thuộc tính từ object vào các biến riêng lẻ. Kỹ thuật này giúp giảm bớt sự phức tạp khi truy xuất giá trị từ mảng hoặc object và làm cho mã ngắn gọn, dễ đọc hơn.

Destructuring với Mảng (Array Destructuring)

Khi sử dụng destructuring với mảng, bạn có thể gán các phần tử của mảng vào các biến riêng biệt một cách dễ dàng.

Cú pháp cơ bản

const arr = [1, 2, 3];
const [a, b, c] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Bỏ qua phần tử

Bạn có thể bỏ qua một số phần tử trong mảng bằng cách sử dụng dấu phẩy.

const arr = [1, 2, 3, 4];
const [a, , c] = arr;

console.log(a); // 1
console.log(c); // 3

Gán giá trị mặc định

Nếu phần tử trong mảng không tồn tại, bạn có thể gán giá trị mặc định.

const arr = [1, 2];
const [a, b, c = 10] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 10 (giá trị mặc định được sử dụng)

Destructuring với Object (Object Destructuring)

Với object destructuring, bạn có thể gán các thuộc tính của object vào các biến với cùng tên thuộc tính.

Cú pháp cơ bản

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

const { name, age, city } = person;

console.log(name); // John
console.log(age); // 30
console.log(city); // New York**Đổi tên biến**

Bạn có thể đổi tên biến khi destructuring bằng cách sử dụng cú pháp :.

const person = {
  name: "John",
  age: 30
};

const { name: personName, age: personAge } = person;

console.log(personName); // John
console.log(personAge); // 30

Gán giá trị mặc định

Tương tự như array destructuring, bạn có thể gán giá trị mặc định nếu thuộc tính không tồn tại.

const person = {
  name: "John"
};

const { name, age = 25 } = person;

console.log(name); // John
console.log(age); // 25 (giá trị mặc định được sử dụng)

Destructuring trong các tham số hàm

Bạn có thể sử dụng destructuring để lấy giá trị trực tiếp từ object khi truyền tham số vào hàm.

function greet({ name, age }) {
  console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}

const person = {
  name: "John",
  age: 30
};

greet(person); // Hello, my name is John and I am 30 years old.

Lợi ích của Destructuring

• Ngắn gọn hơn: Destructuring giúp giảm thiểu số lượng dòng mã cần viết để truy xuất dữ liệu từ mảng hoặc object.
• Dễ đọc hơn: Mã sử dụng destructuring thường dễ hiểu hơn, đặc biệt khi cần lấy nhiều giá trị từ cùng một object hoặc mảng.
• Tính rõ ràng: Khi sử dụng destructuring, các biến được định nghĩa rõ ràng và có tên cụ thể, giúp tránh nhầm lẫn.

Sử dụng Destructuring trong thực tế

Destructuring rất hữu ích trong các tình huống như:

• Lấy giá trị từ phản hồi của API.
• Truyền tham số vào hàm.
• Làm việc với các cấu trúc dữ liệu phức tạp.

Với khả năng linh hoạt và tiện dụng, destructuring đã trở thành một công cụ mạnh mẽ trong lập trình JavaScript hiện đại.