Cách Destructure Object trong JavaScript

Trong bài viết này, bạn sẽ cùng mình tìm hiểu về lý do tại sao chúng ta sử dụng Destructure Object và cách Destructure Object trong JavaScript nhé!

Kể từ ECMAScript 6 (hay viết tắt là ES6), bạn có thể mô tả cấu trúc các đối tượng trong JavaScript. Là một lập trình viên JavaScript, bạn có thể sẽ cấu trúc lại các đối tượng để sử dụng một cách hợp lý.

Tại sao phải Destructure Object trong JavaScript?

Hãy xem qua một ví dụ để giúp chúng ta hiểu tại sao chúng ta muốn Destructure Object ngay từ đầu. Hãy tạo một đối tượng với tên pet:

const pet:  = {
 name: 'Captain',
 food: 'Kibble',
 color: 'Black'
};Code language: JavaScript (javascript)

Giả sử chúng ta chỉ muốn in ra thức ăn của pet. Chúng ta có thể làm như sau:

console.log(pet.food);Code language: CSS (css)

Output là kibble sẽ được hiển thị ở Console. Tuy nhiên, thật tẻ nhạt khi mỗi khi chúng ta cần giá trị của food, chúng ta phải in ra cả pet.name. Trước khi có ES6, các lập trình viên JavaScript sẽ sử dụng:

const food = pet.food;Code language: JavaScript (javascript)

Ở đây, chúng ta khai báo một biến có tên là food và trỏ biến đó tại giá trị được lưu trữ bên trong pet.food, là kibble.

console.log(food); // output: kibbleCode language: JavaScript (javascript)

Tuy nhiên, giả sử chúng ta muốn làm điều tương tự với các thuộc tính còn lại với đối tượng pet:

const name = pet.name;
const food = pet.food;
const color = pet.color;Code language: JavaScript (javascript)

Điều này bắt đầu dài dòng. Đây là lúc cơ cấu Destructuring xuất hiện.

Cách Destructure Object trong JavaScript

Thay vì viết ra const food = pet.food, chúng ta có thể viết như sau:

const { food } = pet;Code language: JavaScript (javascript)

Bây giờ nếu chúng ta in ra food, chúng ta có thể thấy chúng ta đã tạo biến food rồi.

console.log(food); // output: kibbleCode language: JavaScript (javascript)

Sử dụng destructuring, code của chúng ta sẽ ngắn gọn hơn. Đây là lý do tại sao các lập trình viên JavaScript bắt đầu sử dụng destructuring khi nó được giới thiệu trong ES6.

Hãy dừng và nhìn lại dòng này:

const { food } = pet;Code language: JavaScript (javascript)

Có chuyện gì ở đây vậy?

Hãy nhớ rằng, trong một đối tượng JavaScript, một thuộc tính là một cặp khóa/giá trị. Khóa là một chuỗi và giá trị có thể là bất kỳ kiểu dữ liệu nào. Trong đối tượng pet, một trong những khoá là food và giá trị tương ứng của nó là kibble.

Khi chúng ta đặt biến food trong dấu ngoặc, chúng ta sẽ nhìn vào bên trong đối tượng pet để tìm thuộc tính có cùng tên. Chúng ta tạo một biến mới với tên food và đặt giá trị của nó thành kibble, giá trị tương ứng của khóa đó.

Nếu bạn muốn destructuring nhiều thuộc tính và khóa của chúng khỏi một đối tượng, bạn có thể làm như sau:

const { name, food, color } = pet;
Code language: JavaScript (javascript)

Kết quả sẽ như sau:

console.log(name, food, color) // output: captain chewtoy black
Code language: JavaScript (javascript)

Kết luận

Qua đây, chúng ta đã học cách Destructure Object trong JavaScript và lý do tại sao các lập trình viên JavaScript muốn làm như vậy. Không chỉ với một thuộc tính riêng biệt, destructuring còn có thể sử dụng với nhiều thuộc tính.

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

---

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG