Destructuring, Spread operator và Rest Parameters trong javascript

ES6 ra đời, cùng những tính năng mới mẻ và hấp dẫn. Một trong số đó là Destructuring, Spread operator và Rest parameters.

Hôm nay chúng ta cùng tìm hiểu về 3 cái này, nó là gì và dùng như thế nào nha.

 

1. Destructuring trong javascript là gì?

 

 

Nói ngay, nó là cú pháp thôi. Chả có gì ngoài...hay 😆

Cú pháp này cho phép bạn gán các thuộc tính của Object hoặc Array, giúp code trở nên ngắn gọn và dễ thao tác hơn.

 

Destructuring có 2 loại: Destructuring Object và Destructuring Array. Chúng ta đi vào chi tiết từng loại nhé.

 

• Destructuring Object

Destructuring object cho phép tạo ra nhiều biến từ những properties của object. Cùng xem ví dụ cụ thể để dễ hiểu hơn nha.

const bbmcode = {
  	url: 'https://bbmcode.com',
    name: 'BBMCode',
    email: 'bbmcode247@gmail.com'
}

Theo cách thông thường, để tạo ra 3 biến lưu trữ url, name và email sẽ viết như bên dưới:

const url = bbmcode.url;
const name = bbmcode.name;
const email = bbmcode.email;

 

Với destructuring thì chỉ cần một dòng code duy nhất rất ngắn gọn như sau:

const { url, name, email } = bbmcode;

console.log(url, name, email);

Quá đơn giản đúng không nào, chỉ cần tên biến trùng với tên property của object, chúng ta sẽ lấy được giá trị. Tuyệt vời ông mặt trời 🔆🔅☀️👍

 

• Destructuring Array

Cũng tương tự với object, với array chúng ta vẫn có thể dùng destructuring.

 

const info = ['bbmcode247@gmail.com', 'https://bbmcode.com', 'BBMCode'];
const [email, url, name] = info;

console.log(email, url, name); // bbmcode247@gmail.com https://bbmcode.com BBMCode

Đối với object, khi destructuring thì chúng ta quan trọng tên property, còn với array thì tên biến và thứ tự trong array phải khới nhau.

 

Như ví dụ trên, name ở vị trí sau cùng thì giá trị được gán vào name sẽ là BBMCode

 

---

 

💢 Một số ứng dụng destructuring array/object mà mình hay dùng

 

• swapping array - chuyển đổi vị trí phần tử trong mảng

var firstname = 'Nguyễn';
var lastname = 'Nam';

console.log(firstname, lastname); // Nguyễn Nam

// swap
[firstname, lastname] = [lastname, firstname]

console.log(firstname, lastname); // Nam Nguyễn

 

• ignore element - lấy vài phần tử trong mảng và bỏ qua những phần tử không cần thiết

const getBirthday = () => [12, 22, 1988]; // Ngày 22 tháng 12 năm 1988

// Chỉ lấy tháng và năm
const [month, ,year] = getBirthday();

console.log(month, year); // 12 1988

 

• lấy giá trị của property trong object, sau đó gán vào biến mới.

const bbmcode = {url: 'bbmcode.com', name: 'BBMCode'};
const {url: blogUrl, name: newName} = bbmcode;

console.log(blogUrl, newName);  // bbmcode.com BBMCode

 

❤️ Đến đây mình nghĩ quá đủ để hiểu destructuring, mình sẽ nói sang spread nhé.

 

---

2. Spread operator trong javascript là gì?

 

Spread operator hay còn gọi là three dots ... , rất dễ nhận biết nhờ nó là 3 dấu chấm.

Spread cũng giống như destructuring, hỗ trợ chúng ta thao tác với array và object.

 

Spread chuyển đổi các phần tử của mảng/object thành danh sách các phần tử phân tách với nhau bằng dấu phẩy. Đọc thì rườm rà vậy chứ nhìn vào ví dụ cái hiểu ngay thôi các bạn à.

 

• Spread array

const sedan = ['BMW', 'Honda'];
const suv = ['Hyundai', 'Audi'];

// Unpack 2 arrays into array all
const all = [...sedan, ...suv ];

console.log(all); // ['BMW', 'Honda', 'Hyundai', 'Audi']

Quá dễ hiểu đúng không? Khi spread lần 1 với ...sedan, ta sẽ có 'BMW', 'Honda' tiếp kế khi spread lần 2 với ...suv, ta có được danh sách các phần tử gồm 'BMW', 'Honda', 'Hyundai' và 'Audi'

 

Và như thế array all được hình thành chứa tất cả các phần tử của 2 array kia.

 

💞 Việc này hoàn toàn giống với cách truyền thống, chúng ta hay dùng concat để merge 2 mảng lại đó, các bạn có nhớ không.

Rõ ràng dùng spread thay cho concat thì vừa ngắn gọn, lại vừa trực quan dễ nhớ nữa.

 

• Spread object

// copy object with spread
const object1 = { isPassed: true, enabled: false };
const object2 = { ...object1 }; 

console.log(object2); // {isPassed: true, enabled: false}

 

Như chúng ta đã biết, object trong javascript có reference, khi gán và thay đổi giá trị của object,  chúng ta thường hay clone (copy) ra một object mới để tránh bị lỗi.

 

Với cách cũ hay dùng là Object.assign().  Giờ đây đã có spread, việc copy object2 từ object1 như trên ví dụ, rất đơn giản và gọn gàng. Hay quá ha các bạn 👍

 

Ứng dụng spread trong thực tế mình hay gặp là truyền đối số vào function. Ví dụ như vầy:

function calc(a, b, c) {
  return a * b * c;
}
calc(1, 2, 3) ; // 6

// array
const numbers = [1, 2, 3];
// làm sao truyền array number vào function calc để tính phép nhân đây? dùng spread!
const result = calc(...numbers);
console.log(result); // 6

Ví dụ này cho thấy spread giúp code chung ta gọn, đọc cũng dễ hiểu nữa.

 

Đến đây mình nghĩ đã rõ về spread rồi, xin được đi qua phần cuối trong bài này là rest parameters.

 

3. Rest parameters trong javascript là gì?

 

 

Thực ra một khi đã nắm rõ spead ở phía trên thì rest parameter bạn xem lướt qua cũng hiểu.

Tuy cú pháp cũng là dấu 3 chấm (...) nhưng lại mang ý nghĩa ngược lại. Cùng xem ví dụ nha.

 

function example(...args) {
  console.log(args)
}

example(1, 2, 3, 4, 5, 6); // [1, 2, 3, 4, 5, 6]

 

Chính vì như ví dụ trên mà người ta hay gọi kèm chữ parameter  (rest paramter). rest gom lại các phần tử phân cách nhau dấu phẩy thành một array.

 

Như ví dụ trên, có thể hiểu nôm na là rest sẽ gom 1,2,3,4,5,6 thành một array [1,2,3,4,5,6]

 

❓ Thế vì sao không viết function example với arg là một array cho rồi, dùng rest chi nhỉ?

Thực tế chúng ta dùng rest parameter cho các function mà không nắm rõ số lượng args. Và cũng tiết kiệm được những dòng code tổng hợp thành mảng, trước khi đưa mảng này vào function example. Đó là cái hay của rest parameter đó các bạn.

 

OK đến đây mình xin dừng bài viết, cảm ơn các bạn đã đọc!