Destructuring trong JavaScript

Trong JavaScript, Destructuring là một cú pháp giúp trích xuất giá trị từ mảng hoặc đối tượng một cách nhanh chóng và gọn gàng. Thay vì truy cập từng phần tử bằng cách thông thường, ta có thể dùng destructuring để lấy dữ liệu dễ dàng hơn.

Lợi ích của Destructuring:

• Viết code ngắn gọn, dễ hiểu hơn.
• Giúp truy xuất dữ liệu nhanh chóng khi làm việc với API hoặc JSON.
• Dễ dàng tái sử dụng và truyền dữ liệu giữa các hàm.

Destructuring

1. Object Destructuring (Phân rã đối tượng)

Khi làm việc với đối tượng (Object), ta có thể dùng destructuring để lấy dữ liệu nhanh chóng.

Cách sử dụng:

const user = {
  name: "John Doe",
  age: 25,
  email: "johndoe@example.com"
};

// Trích xuất giá trị từ object
const { name, age, email } = user;

console.log(name);  // "John Doe"
console.log(age);   // 25
console.log(email); // "johndoe@example.com"

Lưu ý:

• Tên biến phải trùng với tên thuộc tính của object.
• Có thể đặt giá trị mặc định nếu thuộc tính không tồn tại:

  const { country = "Unknown" } = user;
  console.log(country); // "Unknown"
  

• Đổi tên biến khi destructuring:

  const { name: fullName } = user;
  console.log(fullName); // "John Doe"
  

2. Array Destructuring (Phân rã mảng)

Khi làm việc với mảng, destructuring giúp lấy phần tử dễ dàng hơn mà không cần truy cập theo chỉ mục.

Cách sử dụng:

const colors = ["red", "green", "blue"];

// Trích xuất giá trị từ mảng
const [firstColor, secondColor, thirdColor] = colors;

console.log(firstColor);  // "red"
console.log(secondColor); // "green"
console.log(thirdColor);  // "blue"

Lưu ý:

• Có thể bỏ qua giá trị không cần lấy:

  const [, , lastColor] = colors;
  console.log(lastColor); // "blue"
  

• Gán giá trị mặc định nếu phần tử không tồn tại:

  const [primary = "black"] = [];
  console.log(primary); // "black"
  

• Sử dụng rest parameter (...) để lấy phần còn lại của mảng:

  const [first, ...rest] = colors;
  console.log(rest); // ["green", "blue"]
  

3. Ứng dụng thực tế: Làm việc với dữ liệu JSON

Destructuring đặc biệt hữu ích khi lấy dữ liệu từ API hoặc JSON.

Ví dụ: Gọi API giả lập và trích xuất dữ liệu từ JSON

const product = {
  id: 101,
  name: "Laptop",
  price: 1200,
  details: {
    brand: "Dell",
    stock: 50
  }
};

// Lấy thông tin sản phẩm từ object JSON
const { name, price, details: { brand, stock } } = product;

console.log(name);  // "Laptop"
console.log(price); // 1200
console.log(brand); // "Dell"
console.log(stock); // 50

Lưu ý:

• Có thể destructure lồng nhau để lấy dữ liệu từ các object con.
• Dữ liệu JSON từ API thường có cấu trúc phức tạp, destructuring giúp trích xuất nhanh chóng.

Kết luận

Destructuring là một kỹ thuật mạnh mẽ giúp truy xuất dữ liệu nhanh chóng từ Object và Array trong JavaScript.
Lợi ích:

• Giúp code gọn gàng, dễ đọc hơn.
• Hữu ích khi làm việc với API và dữ liệu JSON.
• Kết hợp tốt với các tính năng ES6+ khác như Spread Operator (...).