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

Giới thiệu

Object Destructuring là cú pháp ES6 cho phép trích xuất các thuộc tính của đối tượng và gán vào biến một cách ngắn gọn, thay vì truy cập qua dấu chấm lặp đi lặp lại.

Cú pháp cơ bản

const { tenThuocTinh1, tenThuocTinh2 } = doiTuong;

Ví dụ hoàn chỉnh

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object Destructuring</title>
    <style>
        body { font-family: 'Segoe UI', sans-serif; padding: 20px; }
        .sample, .result { font-size: 16px; font-weight: 500; margin: 10px 0; padding: 10px; border-radius: 4px; }
        .sample { color: #d32f2f; background: #ffebee; }
        .result { color: #6a1b9a; background: #f3e5f5; }
        button { padding: 8px 16px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>Phân rã đối tượng trong JavaScript</h1>
    <div class="sample" id="sample"></div>
    <div class="result" id="result"></div>
    <button id="btn">PHÂN RÃ ĐỐI TƯỢNG</button>
    <h3>Nhấn nút để phân rã đối tượng ở trên</h3>

    <script>
        const sampleEle = document.getElementById('sample');
        const resultEle = document.getElementById('result');
        const btn = document.getElementById('btn');

        const obj = {
            firstName: 'Rohan',
            lastName: 'Sharma',
            age: 22
        };

        sampleEle.innerHTML = "obj = {firstName: 'Rohan', lastName: 'Sharma', age: 22}";

        // Phân rã đối tượng
        const { firstName, lastName, age } = obj;

        btn.addEventListener('click', () => {
            resultEle.innerHTML = `firstName=${firstName} lastName=${lastName} age=${age}`;
        });
    </script>
</body>
</html>

Kết quả

Sau khi nhấn nút, hiển thị: firstName=Rohan lastName=Sharma age=22

Nâng cao: Đổi tên biến và giá trị mặc định

// Đổi tên biến
const { firstName: ho, lastName: ten, age: tuoi = 18 } = obj;
console.log(ho, ten, tuoi); // Rohan Sharma 22

// Giá trị mặc định cho thuộc tính không tồn tại
const { address = 'Không có' } = obj;
console.log(address); // Không có

Ứng dụng thực tế

• Nhận tham số hàm dưới dạng đối tượng: function config({ width = 100, height = 100 } = {})
• Destructuring trong tham số hàm: const ({ x, y }) = getCoords();
• Swap giá trị: [a, b] = [b, a];