destructuring js là gì? Tìm hiểu về destructuring javascript

destructuring javascript là gì?

destructuring trong javascript là một tính năng của JavaScript được giới thiệu trong ES6. Feature này rất hữu ích để trích xuất các thuộc tính từ các objects, array và gán chúng với các biến.

Ngoài ra nó còn có thể truy cập các thuộc tính từ các nested objects (các object lồng nhau) và có thể đặt giá trị mặc định nếu thuộc tính không tồn tại.

Trong bài viết này mình xin chia sẻ cách sử dụng destructuring trong JavaScript nhé.

Object destructuring

Property to variable

Ví dụ: Hãy tưởng tượng chúng ta chưa có destructuring để sử dụng và bạn muốn get một số thuộc tính của một object. Chúng ta sẽ làm như sau:

var rapper = {
  name: 'eminem',
  born: '1972'
};

var name     = rapper.name; // eminem
var born = rapper.born; // 1972

Khoan, dừng khoảng chừng là 2 giây 🥴. Sau khi destructuring ra lò thì nhìn lại đoạn code trên công nhận có hơi dài dòng một xíu.

Giả sử chúng ta có rất nhiều thuộc tính cần lấy từ object trên, với mỗi biến ta đặt tên giống với thuộc tính để dễ sử dụng, như vậy chúng ta sẽ bị duplicate, ví dụ như biến name và born. Việc code như này khá mất sức 🥶.

Ơn giời, thời destructuring đến rồi. Bây giờ chúng ta thử xem lợi ích của nó nhé:

const rapper = {
  name: 'eminem',
  born: '1972'
};
const { name, born } = rapper;
console.log(name,born); => 'eminem', '1972'

Mình giải thích đoạn code trên nhé:

Đoạn code const { name, born } = rapper; là một phép gán, lệnh này xác định name và born, sau đó gán cho các biến này các giá trị của thuộc tính rapper.name và rapper.born tương ứng.

Các bạn muốn lấy giá trị thuộc tính nào thì chỉ cần ghi key của nó ra thôi ^^. Rất ngắn gọn và nhanh chóng đúng không ?😁.

Default value

Nếu đối tượng bạn muốn destructuring không có thuộc tính được chỉ định trong phép gán, thì biến này sẽ được gán là undefined. Cùng xem ví dụ bên dưới nhé:

const user = {name: 'Hung', class: 'CN18A'};

const { born } = user;
console.log(born); // undefined

Sau khi destructuring, các bạn có thể thấy born có kết quả là undefined vì trong object này không có thuộc tính nào là born.

Không sao không sao, khi sử dụng destructuring các bạn có thể set giá trị mặc định cho thuộc tính bằng cách:

const user = {name: 'Hung', class: 'CN18A'};

const { born = 2000 } = user;
console.log(born); // 2000

Sau khi gắn giá trị mặc định, thay vì nhận kết quả là undefined thì chúng ta có biến born với giá trị mặc định 2000.

Aliases

Nếu như bạn nhận được một object và trong đó có chứa các thuộc tính có name khá dài hoặc đơn giản là bạn muốn thay đổi name khi destructuring, ta có thể sử dụng Aliases (Bí danh) bằng cách:

const user = {hovaten: 'Nguyen Van A', class: 'CN18A'};

const { hovaten: fullname } = user;
console.log(fullname); // Nguyen Van A

Lệnh trên tương đương với:

const fullname = user.hovaten;

Các bạn lưu ý: khi đã đặt bí danh cho biến rồi thì bạn không thể sử dụng biến có tên hovaten được nữa. Vì lúc này fullname mới là tên biến.

get properties from nested objects

Chúng ta có thể lấy các thuộc tính từ các nested objects rất đơn giản bằng cách:

const user = {
  name: 'Nanno',
  address: {
    city: 'Bangkok',
  },
  phoneNumber: {
    viettel: 033000,
    vina: 090909
  }
};

const { address: { city }, phoneNumber: {viettel, vina} } = user;
console.log(city); // Bangkok
console.log(viettel, vina); // 033000, 090909

Cách sử dụng khá đơn giản, giả sử các bạn muốn lấy thuộc tính city thuộc object address, thì khi destructuring các bạn cần khai báo tên object chứa thuộc tính cần lấy và sử dụng cặp {} bên trong chứa thuộc tính cần lấy là xong ^^.

Rest in Object Destructuring

rest syntax rất hữu ích để lấy các thuộc tính còn lại sau khi destructuring:

Cú pháp:

const { tên thuộc tính, ...rest } = expression;

Một ví dụ để các bạn dễ hiểu hơn:

const user = {
  name: 'Trang',
  born: '2000',
  hometown: 'Hanoi'
};
const { name, ...rest } = user;
console.log(name) // Trang
console.log(rest) // { born:"2000", hometown:"Hanoi" }

Để lấy các thuộc tính còn lại các bạn có thể đặt tên tùy ý cho biến và sử dụng Spread syntax (...).

Sau khi đã tìm hiểu xong về destructuring với object thì chúng ta chuyển qua Array xem có gì hay ho không nhé ^^.

Array destructuring

basic

Tương tự như object ta có thể lấy giá trị trong mảng ra bằng cách:

const bangai = ['Mi', 'Nhi', 'Vy'];

const [bangai1, bangai2, bangai3] = bangai;
console.log(bangai1, bangai2, bangai3); // "Mi", "Nhi", "Vy" 😁

Variable assignment

Chúng ta có thể gán giá trị một biến thông qua destructuring, điều này giúp tách biệt với phần khai báo.

let a, b;

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

Default values

Như object mình đã giải thích ở trên chúng ta cũng có thể gán giá trị mặc định cho biến bằng cách:

let a, b;

[a=2, b=3] = [0];
console.log(a); // 0
console.log(b); // 3

Swapping variables

Bằng cách sử dụng destructuring ta có thể hoán đổi giá trị 2 biến cho nhau. Cách này khá hay mà không cần sử dụng biến tạm ^^.

let a = 1;
let b = 2;

[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

Ignoring some returned values

Chúng ta có thể bỏ qua các giá trị trong mảng nếu không muốn sử dụng:

function getArr() {
  return [1, 2, 3];
}

const [a, ,b] = getArr();
console.log(a); // 1
console.log(b); // 3

Assigning the rest of an array to a variable

Khi destructuring một mảng, chúng ta có thể gán phần còn lại của mảng đó cho một biến bằng cách sau:

const [first, ...rest] = [100, 500, 120];
console.log(first); // 100
console.log(rest); // [500, 120]

Các bạn lưu ý: trong trường hợp này chúng ta phải sử dụng rest ở vị trí cuối cùng nếu không sẽ bị lỗi: Rest element must be last element.

const [c, ...b, a] = [1, 2, 3]; // Rest element must be last element

Kết luận

Như vậy là chúng ta đã tìm hiểu về destructuring trong javascript rồi. Đây quả thực là một feature rất tiện lợi cho chúng ta đúng không 😊, ngại gì mà không sử dụng chứ ^^.

Hi vọng bài viết sẽ giúp ích cho các bạn. Hẹn gặp lại trong các bài viết sắp tới nhé 😃😁.