Dùng Spread syntax để code chuyên nghiệp hơn

Trong ECMA6 (ES6) ngoài những tính năng mới như arrow function, map, filter, v.v. thì không thể bỏ qua tính năng Spread syntax (…). Khi mình bắt đầu học ES6 mình rất thích sử dụng (…) này nó giúp mình tiết kiệm thời gian cũng như code trở nên gọn nhẹ xử lý được nhiều trường hợp hơn so với không dùng (…). Vậy Spread syntax là gì và cách dùng nó như thế nào. Dưới đây mình xin giới thiệu 2 trường hợp sử dụng Spread syntax là Spread operator và Rest parameters (Rest operator).

1. Spread operator

Rất hữu ích khi chúng ta muốn copy tất cả thuộc tính của một object sang một object mới nhưng lại muốn thay đổi 1 hoặc ít thuộc tính trong object cũ.

const object1 = {
    name: 'NVK Solution',
    description: 'Blog IT tutorials',
    rating: 5,
    website: 'https://nvksolution.com'
};
console.log(object1)
//name: "NVK Solution", description: "Blog IT tutorials", rating: 5, website: "https://nvksolution.com"}

Khi đó dùng … chúng ta sẽ thấy nó dễ dàng và chỉ cần trong 1 bước duy nhất vừa clone vừa thay đổi giá trị cần thay.

const object2 = {
   ...object1,
   name: 'Best Website',
}
console.log(object2)
//{name: "Best Website", description: "Blog IT tutorials", rating: 5, website: "https://nvksolution.com"}

2. Rest parameters

Đôi khi chúng tôi phải thiết kế một số function có thể chấp nhận n số tham số, trong những tình huống này có thể thực sự hữu ích. Ví dụ đơn giản, Tôi muốn thiết kế một phương thức để tổng n số:

function sum(...numbers){
  return numbers.reduce((sum, val)=>{
      return sum += val;
    });
}
// Kết quả:

sum(3,5) // trả về  8
sum(1,2, 3, 5) // trả về  11.

 

Một ví dụ khác trong thực tế mà mình mà mình hay sử dụng để truyền tham số lên cho một api call … giúp chúng ta có thể truyền n tham số lên server mà không cần phải định nghĩa trước.

const search = async(...params)  =>{
     return  await api.post('https://nvksolution.com/api/search_post/', params);
}