Quartz 🪬

Spread and Rest Operator

2 min read

Toán tử spread (Spread Operator) và rest (Rest Operator) đều giống nhau về cú pháp (có ... ở đầu), tuy nhiên chức năng của chúng lại khác nhau:

  • Spread operator dùng để phân rã các phần tử của array hoặc thuộc tính của object thành một danh sách các giá trị.
  • Rest operator dùng để gom nhóm danh sách các giá trị (phân biệt nhau bởi dấu phẩy) thành một mảng.

Spread Operator

Trong đoạn code bên dưới, nếu ta truyền mảng nums vào hàm, chỉ có duy nhất tham số param1 có đối số:

const nums = [1, 2, 3]
 
function logArray(param1, param2, param3) {
  console.log(param1, param2, param3)
}
 
logArray(nums) // [1, 2, 3] undefined undefined

Nhưng nếu ta sử dụng spread operator để phân giải mảng nums thành ba phần tử làm đối số, tất cả các tham số đều sẽ có đối số:

const nums = [1, 2, 3]
 
function logArray(param1, param2, param3) {
  console.log(param1, param2, param3)
}
 
logArray(...nums) // 1 2 3

Ngược lại, nếu chúng ta có ba đối số, nhưng tham số chỉ có một, thì chỉ có đối số đầu tiên được xuất ra:

const num1 = 1
const num2 = 2
const num3 = 3
 
function logArray(params) {
  console.log(params)
}
 
logArray(num1, num2, num3) // 1

Rest Operator

Để có thể gom nhóm tất cả các đối số lại thành một mảng duy nhất, ta sử dụng rest operator làm tham số:

const num1 = 1
const num2 = 2
const num3 = 3
 
function logArray(...params) {
  console.log(params)
}
 
logArray(num1, num2, num3) // [1, 2, 3]

Tương tự với object.

Summary

  • Spread operator dùng để phân rã mảng hoặc đối tượng (nằm ở vế phải của phép gán bằng).
  • Spread operator còn có thể dùng phân rã mảng hoặc đối tượng và truyền vào làm đối số.
  • Rest operator dùng để lấy các phần tử/thuộc tính còn lại của mảng/đối tượng (nằm vế trái phép gán bằng).
  • Rest operator (hay rest parameter) dùng để làm tham số của hàm không biết trước số lượng tham số.

## Resources

- [Rest parameter & spread](https://javascript.info/rest-parameters-spread)
- [JavaScript Rest vs Spread Operator – What’s the Difference? (freecodecamp.org)](https://www.freecodecamp.org/news/javascript-rest-vs-spread-operators)