JavaScript Spread Operator

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

---

• Spread operator allows us to unpack all elements in an array.
• We can only use it in values where it is separated by commas (arrays or objects).

const arr = [7, 8, 9];
 
// Without the spread operator
 
const badNewArr = [1, 2, arr[0], arr[1], arr[2]];
 
console.log(badNewArr); // returns an array of [1, 2, 7, 8 ,9]
 
// With the spread operator,
 
const newArr = [1, 2, ...arr];
 
console.log(newArr); // returns an array of [1 2, 7, 8, 9]

• It can be used to (shallow) copy and merge arrays.

// Copy array (Shallow)
const mainMenuCopy = [...restaurant.mainMenu];
 
// Join 2 arrays
const menu = [...restaurant.starterMenu, ...restaurant.mainMenu];
console.log(menu);

• The spread operator works with all iterables — things such as arrays, strings, maps or sets but not objects.

// Iterables: arrays, strings, maps, sets. NOT objects
const str = "Jonas";
const letters = [...str, " ", "S."];
console.log(letters);
console.log(...str);

• We can use it only while building an array or passing values into a function.

const str = 'Jonas';
console.log(`${...str} Schmedtmann`); // Won't work
 
// Real-world example
const restaurant = {
  orderPasta(ing1, ing2, ing3) {
    console.log(
      `Here is your declicious pasta with ${ing1}, ${ing2} and ${ing3}`
    );
  }
};
 
const ingredients = [
  prompt("Let's make pasta! Ingredient 1?"),
  prompt('Ingredient 2?'),
  prompt('Ingredient 3'),
];
console.log(ingredients);
// restaurant.orderPasta(ingredients[0], ingredients[1], ingredients[2]);
restaurant.orderPasta(...ingredients); // Use spread instead

Spread vs Destructuring

The spread operator is different to the destructuring of arrays as it takes all the elements in an array and it doesn’t create new variables.

Spread in Objects

Spread can be used to shallow copy objects, with or without changing their attributes.

const newRestaurant = { foundedIn: 1998, ...restaurant, founder: "Guiseppe" }; // Copy with new attributes
console.log(newRestaurant);
const restaurantCopy = { ...restaurant }; // shallow copy
restaurantCopy.name = "Ristorante Roma";
console.log(restaurantCopy.name); // Ristorante Roma
console.log(restaurant.name); // Classico Italiano