1. Lời nói đầu

• Nhân lúc đang ngồi học ES12 thì quay lại đọc tí ES6 thì phát hiện ra rằng mình cũng chưa hiểu và sử dụng hết những chức năng + cũng hỏi qua có nhiều anh em chưa biết nên ngồi viết cái blog về 2 tính năng mình dùng khá là nhiều. Đó là spread syntax và rest parameters

2. Spread operator

2.1. Khái niệm:

    Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

• Hiểu đơn giản
• Cú pháp spread là dấu 3 chấm: ...
• Spread Syntax cho phép duyệt qua các phần tử và truyền vào phương thức như các đối số.

2.2. 1 số trường hợp thường dùng

• Mình thường dùng để copy hoặc update 1 object.

2.2.1. Spread syntax with object

let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };

let clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

let mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

let updatedObj= { ...obj1, z: 19 };
// Object { foo: "bar", x: 42, z: 19 }

2.2.2. Spread syntax with array

• Copy an array

let arr = [1, 2, 3];
let arr2 = [...arr]; // like arr.slice()

• Concatenate arrays

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];

arr1 = [...arr1, ...arr2]; //same as arr1 = arr1.concat(arr2);
//  arr1 is now [0, 1, 2, 3, 4, 5] 
// Note: Not to use const otherwise, it will give TypeError (invalid assignment)

2.2.3. Spread syntax with string

• Cái này mình chưa dùng cả vì thường dùng Array.from() nhưng giờ sẽ dùng spread vì có vẻ viết ngắn hơn

const pizza = 'pizza';

// Old way
const slicedPizza = pizza.split('');
console.log(slicedPizza); // [ 'p', 'i', 'z', 'z', 'a' ]

// ES6: using Spread
const slicedPizza2 = [...pizza];
console.log(slicedPizza2); // [ 'p', 'i', 'z', 'z', 'a' ]

// ES6: using Array.from
const slicedPizza3 = Array.from(pizza);
console.log(slicedPizza3); // [ 'p', 'i', 'z', 'z', 'a' ]

• Nên thay thế việc dùng split vì split sẽ không hiểu 1 số ký tự đặc biệt như emoji nhưng dùng spread hoặc dùng from sẽ hiểu.

2.3. Lưu ý

• Spread có thể tao ra một shallow copy (hiện để có thể tạo chứ không phải tạo vì đang có bài trên medium bảo nó tạo được deep copy nữa nhưng chưa nghiên cứu rõ)

3 Rest Parameters

• Bạn có thể hiểu là 1 tính năng khai báo một hàm với số lượng tham số không xác định. Đúng như cái tên mà chúng ta có thể hiểu là tham số còn lại
• Ví dụ

 function sum(a, b) {
  return a + b;
}

console.log( sum(1, 2, 3, 4, 5) ); // 3
=> 3

• Trong trường hợp trên muốn cộng 5 số thì ta sẽ phải viết a,b,c,d,e nhưng với rest parameter

function sum(...args) { // args is the name for the array
  let sum = 0;

  args.forEach((arg) => sum += arg)

  return sum;
}

console.log( sum(1) ); // 1
console.log( sum(1, 2) ); // 3
console.log( sum(1, 2, 3) ); // 6

• Hoặc 1 trường hợp đơn giản hơn mình hay dùng khi có 1 object và chỉ muốn lấy riêng ra 1 key thôi

const { name, ...rest } = props;

• Thì như ví dụ trên ta sẽ đã tạo ra 2 const name và rest thì name chính là key/value name của props còn rest sẽ bao gồm các phần còn lại mà không có name

4. Nguồn tham khảo

https://medium.com/@kevinlai76/the-spread-operator-deep-and-shallow-copies-d193ac9b58bf
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
https://viblo.asia/p/rest-parameters-va-spread-operator-E375zwxPKGW