Trong quá trình phát triển ứng dụng web, việc thao tác với Object và Array là công việc diễn ra hằng ngày của một Javascript Developer. Trước phiên bản ES6, việc trích xuất dữ liệu từ Object hay Array thường tốn nhiều dòng code lặp đi lặp lại.

Sự xuất hiện của Destructuring Assignment (Cú pháp phân rã) trong ES6 đã mang lại một bước tiến lớn, giúp bạn viết code ngắn gọn, sạch sẽ (clean code) và dễ bảo trì hơn đáng kể.

Hãy cùng DCSoft tìm hiểu chi tiết về Destructuring và các mẹo (tips) áp dụng thực tế qua bài viết dưới đây!

1. Destructuring Trong JavaScript Là Gì?

Destructuring assignment là một cú pháp đặc biệt trong JavaScript (ES6+), cho phép bạn giải nén (unpack) các giá trị từ Array hoặc các thuộc tính từ Object ra thành các biến riêng biệt một cách nhanh chóng.

• Ưu điểm chính:

  • Giảm thiểu việc lặp lại tên đối tượng/mảng.

  • Giúp code rõ ràng, cô đọng hơn.

  • Hỗ trợ gán giá trị mặc định (default values) dễ dàng.

2. Destructuring Với Object (Object Destructuring)

Đây là dạng Destructuring được sử dụng thường xuyên nhất trong thực tế, đặc biệt là khi làm việc với API response hoặc các Props trong ReactJS.

Cú pháp cơ bản

Thay vì phải truy cập thủ công từng thuộc tính:

const dev = { name: 'DCSoft', level: 'Senior', language: 'JavaScript' };

// Cách truyền thống
const name = dev.name;
const level = dev.level;

Bạn có thể viết ngắn gọn bằng Destructuring:

const dev = { name: 'DCSoft', level: 'Senior', language: 'JavaScript' };

// Sử dụng Object Destructuring
const { name, level, language } = dev;

console.log(name);     // Output: DCSoft
console.log(level);    // Output: Senior

Đổi tên biến (Renaming)

Khi bạn muốn trích xuất thuộc tính nhưng lưu vào một tên biến khác để tránh trùng lặp:

const user = { id: 101, username: 'dcsoft_dev' };

// Đổi tên username thành clientName
const { username: clientName } = user;

console.log(clientName); // Output: dcsoft_dev

Thiết lập giá trị mặc định (Default Values)

Nếu thuộc tính không tồn tại trong Object, bạn có thể gán sẵn giá trị mặc định để tránh nhận undefined:

const config = { host: 'localhost' };

const { host, port = 8080 } = config;

console.log(host); // Output: localhost
console.log(port); // Output: 8080 (Lấy giá trị mặc định)

Nested Object Destructuring (Object lồng nhau)

Trích xuất dữ liệu từ các Object nằm sâu bên trong:

const company = {
  name: 'DCSoft',
  address: {
    city: 'Da Nang',
    country: 'Vietnam'
  }
};

const { address: { city, country } } = company;

console.log(city);    // Output: Da Nang
console.log(country); // Output: Vietnam

3. Destructuring Với Array (Array Destructuring)

Khác với Object (trích xuất dựa theo tên thuộc tính), Array Destructuring trích xuất dữ liệu dựa theo thứ tự chỉ số (index).

Cú pháp cơ bản

const techStack = ['JavaScript', 'Python', 'PHP'];

// Cú pháp Destructuring Array
const [firstTech, secondTech] = techStack;

console.log(firstTech);  // Output: JavaScript
console.log(secondTech); // Output: Python

Bỏ qua các phần tử không cần thiết

Bạn chỉ cần để trống khoảng cách giữa các dấu phẩy để bỏ qua phần tử mong muốn:

const numbers = [10, 20, 30, 40, 50];

// Chỉ lấy phần tử thứ 1 và thứ 3
const [first, , third] = numbers;

console.log(first); // Output: 10
console.log(third); // Output: 30

Hoán đổi giá trị 2 biến (Swap Variables) không cần biến tạm

Đây là một trong những ứng dụng bá đạo nhất của Array Destructuring:

let a = 1;
let b = 2;

// Hoán đổi giá trị A và B
[a, b] = [b, a];

console.log(a); // Output: 2
console.log(b); // Output: 1

4. Các Mẹo (Tips) Advanced Nâng Cao Hiệu Quả Code

Tip 1: Kết hợp với Rest Operator (...)

Thu gom các phần tử/thuộc tính còn lại vào một mảng hoặc object mới:

// Với Array
const [primary, ...others] = ['JS', 'Python', 'Java', 'C#'];
console.log(others); // Output: ['Python', 'Java', 'C#']

// Với Object
const { id, ...userInfo } = { id: 1, name: 'DCSoft', role: 'Admin' };
console.log(userInfo); // Output: { name: 'DCSoft', role: 'Admin' }

Tip 2: Destructuring ngay tại Function Parameters

Thay vì nhận nguyên cả đối tượng trong tham số hàm rồi mới truy cập thuộc tính, bạn có thể Destructure trực tiếp:

// Cách cũ
function printProduct(product) {
  console.log(`${product.name} - ${product.price} USD`);
}

// Cách hiện đại với Destructuring
function printProduct({ name, price }) {
  console.log(`${name} - ${price} USD`);
}

printProduct({ name: 'Web App License', price: 299 }); 
// Output: Web App License - 299 USD

Tip 3: Xử lý an toàn khi Function trả về null hoặc undefined

Khi Destructure tham số hàm có Object, hãy luôn gán mặc định đối tượng rỗng {} để tránh lỗi crash ứng dụng (Cannot destructure property ‘x’ of ‘undefined’):

function setupConfig({ theme = 'light', timeout = 5000 } = {}) {
  console.log(`Theme: ${theme}, Timeout: ${timeout}`);
}

setupConfig(); // Output: Theme: light, Timeout: 5000 (Không bị lỗi nhờ default = {})

5. Tổng Kết

Destructuring không chỉ giúp code JavaScript của bạn ngắn hơn mà còn tăng tính rõ ràng, chuyên nghiệp và giảm thiểu lỗi trong quá trình xử lý dữ liệu. Hãy luyện tập và áp dụng kỹ thuật này thường xuyên trong các dự án thực tế của bạn!

Đừng quên theo dõi series JavaScript Tips trên dcsofttech.com để cập nhật thêm nhiều kiến thức lập trình hữu ích khác.