JavaScript Rest Pattern and Parameters

المعرفة:: JavaScript الحالة::مؤرشفة المراجع:: syahshiimi’s notes, The Complete JavaScript Course 2022 From Zero to Expert

---

What is the Rest Pattern?

• It works exactly the same as the spread operator… working with the ... but does the opposite of the spread operator.
• In short, it is to pack elements into an array, opposite to the spread (unpack elements from an array).
• The Rest operator works on the left hand side of the operator i.e. -spread` operator.
• Rest must be the last element.

// SPREAD, because on RIGHT side of =
const arr = [1, 2, ...[3, 4]];
 
// REST, because on LEFT side of =
const [a, b, ...others] = [1, 2, 3, 4, 5];
console.log(a, b, others);
 
// both sides
const [pizza, , risotto, ...otherFood] = [...restaurant.mainMenu, ...restaurant.starterMenu];
console.log(pizza, risotto, otherFood); // Pizza Risotto ["Item1", "Item2"]

• In object destructuring process, the rest operator creates an object.

const { sat, ...weekdays } = restaurant.openingHours;
console.log(weekdays); // will return an object of fri and thur

• It can be used in functions as well.

const add = function (...numbers) {
  let sum = 0;
  for (let i = 0; i < numbers.length; i++) sum += numbers[i];
  console.log(sum);
};
add(2, 3); // 5
add(5, 3, 7, 2); // 17
add(8, 2, 5, 3, 2, 1, 4); // 25
const x = [23, 5, 7];
add(...x); // 50
 
const restaurant = {
  orderPizza(mainIngredient, ...otherIngredients) {
    console.log(mainIngredient);
    console.log(otherIngredients);
  },
};
 
restaurant.orderPizza("mushrooms", "onion", "olives", "spinach"); // mushrooms ['onion', 'olives', 'spinach']
restaurant.orderPizza("mushrooms"); // mushrooms []

Summary

The rest pattern is used in places which we would otherwise write variables names separated by commas. This is because the rest operator collects these variable names and packs them into either an object or an array.