Cách sử dụng Destructuring trong JavaScript

const person = { name: "Alice", age: 25, city: "Hanoi" };
const { name, age, city } = person;

console.log(name); // Alice
console.log(age); // 25
console.log(city); // Hanoi

Ở đây:

• name, age, và city sẽ lấy giá trị từ person theo đúng tên thuộc tính.

Đổi tên biến khi destructuring

Có thể đổi tên biến khi destructuring để tránh trùng tên biến hoặc để dễ hiểu hơn.

const user = { username: "john_doe", email: "[email protected]" };
const { username: userName, email: userEmail } = user;

console.log(userName); // john_doe
console.log(userEmail); // [email protected]

Ở đây:

• username được đổi tên thành userName.
• email được đổi tên thành userEmail.

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

Khi một thuộc tính không tồn tại trong object, có thể gán giá trị mặc định để tránh lỗi undefined.

const product = { name: "Laptop", price: 1500 };
const { name, price, stock = 0 } = product;

console.log(name); // Laptop
console.log(price); // 1500
console.log(stock); // 0 (vì product không có thuộc tính stock nên lấy giá trị mặc định)

Ở đây:

• stock không có trong object product, nên sẽ nhận giá trị mặc định 0.

Trích xuất phần còn lại với Rest Operator (...)

Có thể sử dụng Rest Operator (...) để lấy tất cả các thuộc tính còn lại trong object sau khi destructuring.

const car = { brand: "Toyota", model: "Camry", year: 2023, color: "red" };
const { brand, model, ...rest } = car;

console.log(brand); // Toyota
console.log(model); // Camry
console.log(rest); // { year: 2023, color: "red" }

Ở đây:

• brand và model được trích xuất riêng.
• rest chứa tất cả các thuộc tính còn lại (year và color).

Destructuring với Object lồng nhau

Có thể trích xuất dữ liệu từ object có cấu trúc lồng nhau.

const student = {
  name: "Emma",
  info: {
    age: 20,
    major: "Computer Science",
    address: { city: "New York", country: "USA" }
  }
};

const { name, info: { age, major, address: { city, country } } } = student;

console.log(name); // Emma
console.log(age); // 20
console.log(major); // Computer Science
console.log(city); // New York
console.log(country); // USA

Kết quả:

Ở đây:

• Trích xuất name từ student.
• Trích xuất age, major từ info.
• Trích xuất city, country từ address.

Destructuring trong hàm

Destructuring trong hàm giúp trích xuất dữ liệu từ tham số đầu vào một cách nhanh chóng, làm cho code gọn gàng và dễ đọc hơn.

Truyền tham số bằng destructuring

Thay vì truy xuất từng thuộc tính của object hoặc array trong hàm, ta có thể destructure trực tiếp trong phần khai báo tham số.

Ví dụ với Array:

function printCoordinates([x, y]) {
  console.log(`Tọa độ: x = ${x}, y = $2025`);
}

const point = [10, 20];
printCoordinates(point); // Tọa độ: x = 10, y = 20

function greet({ name, age }) {
  console.log(`Xin chào, tôi là ${name}, ${age} tuổi.`);
}

const person = { name: "Alice", age: 25 };
greet(person); // Xin chào, tôi là Alice, 25 tuổi.

function getColors([primary = "red", secondary = "blue"] = []) {
  console.log(`Màu chính: ${primary}, Màu phụ: ${secondary}`);
}

getColors(["green"]); // Màu chính: green, Màu phụ: blue
getColors();          // Màu chính: red, Màu phụ: blue

function createUser({ name = "Guest", age = 18 } = {}) {
  console.log(`User: ${name}, ${age} tuổi`);
}

createUser({ name: "John" }); // User: John, 18 tuổi
createUser();                 // User: Guest, 18 tuổi

function displayProduct({ name, price, ...rest }) {
  console.log(`Sản phẩm: ${name}, Giá: ${price}`);
  console.log("Thông tin thêm:", rest);
}

const product = {
  name: "Laptop",
  price: 1200,
  brand: "Dell",
  stock: 10
};

displayProduct(product);
// Sản phẩm: Laptop, Giá: 1200
// Thông tin thêm: { brand: 'Dell', stock: 10 }

// Giả sử gọi API và nhận được dữ liệu JSON
const userData = {
  id: 1,
  name: "Alice",
  email: "[email protected]",
  address: {
    city: "New York",
    country: "USA"
  }
};

// Sử dụng destructuring để lấy dữ liệu
const { name, email, address: { city } } = userData;

console.log(name);  // Alice
console.log(email); // [email protected]
console.log(city);  // New York

function UserProfile({ name, age, email }) {
  return (
    <div>
      <h1>{name}</h1>
      <p>Tuổi: {age}</p>
      <p>Email: {email}</p>
    </div>
  );
}

// Truyền props vào component
<UserProfile name="John" age={30} email="[email protected]" />

export default {
  props: ["user"],
  setup({ user }) {
    const { name, email } = user;
    return { name, email };
  }
};

const { readFile, writeFile } = require("fs");

readFile("test.txt", "utf8", (err, data) => {
  if (err) console.log(err);
  else console.log(data);
});

function printUserInfo({ name, age, email = "Không có email" }) {
  console.log(`Tên: ${name}, Tuổi: ${age}, Email: ${email}`);
}

const user = { name: "David", age: 28 };
printUserInfo(user); // Tên: David, Tuổi: 28, Email: Không có email