Destructuring là một cú pháp đặc biệt trong Javascript. Cú pháp destructuring cho phép bạn trích xuất giá trị từ các mảng hoặc thuộc tính từ các đối tượng (object) và gán chúng vào các biến riêng lẻ. Điều này giúp mã nguồn ngắn gọn, dễ đọc và dễ quản lý hơn. Có 2 cú pháp khai báo đối với mảng và đối tượng (object) tương ứng như sau:
Khai báo Destructuring đối với mảng
const array = [1, 2, 3];
// Destructuring
const [a, b, c] = array;
console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
Đối với mảng, bạn cũng có thể bỏ qua một số phần tử hoặc lấy danh sách một số phần tử. Ví dụ:
const array = [1, 2, 3, 4];
const [first, , third] = array;
console.log(first); // 1
console.log(third); // 3
//Hoặc
const [a,b,...c] = array
console.log(a); // 1
console.log(b); // 2
console.log(c); // [3,4]
Khai báo Destructuring đối với đối tượng (object)
const person = {
name: 'John',
age: 30,
job: 'developer'
};
// Destructuring
const { name, age, job } = person;
console.log(name); // John
console.log(age); // 30
console.log(job); // developer
Việc khai báo biến destructuring đối với object thì tên biến phải trùng với tên thuộc tính của object. Nếu bạn muốn đổi tên thì có thể làm như sau:
const { name: fullName, age: yearsOld } = person;
console.log(fullName); // John
console.log(yearsOld); // 30
Cách sử dụng Destructuring trong một số trường hợp đặc biệt
- Gán giá trị mặc đinh: Trong một số trường hợp giá trị của object không tồn tại, ta có thể gán cho biến một giá trị mặc định.
Ví dụ:
const { name, age, city = 'Hà Nội' } = person;
console.log(city); // Hà Nội
- Destructuring Lồng nhau: Bạn cũng có thể sử dụng destructuring với các đối tượng lồng nhau. Ví dụ:
const user = {
id: 101,
info: {
name: 'Alice',
address: {
city: 'Wonderland',
zipcode: '12345'
}
}
};
const {
info: {
name,
address: { city, zipcode }
}
} = user;
console.log(name); // Alice
console.log(city); // Wonderland
console.log(zipcode); // 12345
- Sử dụng desctructuring trong hàm
const greet = ({ name, age }) =>{
console.log(`Hello, my name is ${name} and I'm ${age} years old.`);
}
const person = { name: 'Alice', age: 25 };
greet(person); // Hello, my name is Alice and I'm 25 years old.
Được viết bởi: Ngọc Ngô
