Spread Operator and Default Value 🦸‍♂️

In this guide, we'll explore the spread operator ... and default parameter values in JavaScript, using examples from the Avengers universe. We'll see why these features are powerful, how they compare to older methods, and how they can make your code cleaner and more efficient.

The Spread Operator ...

The spread operator allows you to expand iterable elements like arrays and objects. It simplifies tasks that used to require more verbose methods.

Copying Arrays

Tony Stark wants to create a copy of his list of armor suits to experiment with new designs, without altering the original list.

Before ES6, copying an array was less straightforward:

// Before ES6
var originalArmors = ["Mark I", "Mark II", "Mark III"];
var copiedArmors = originalArmors.slice();

With the spread operator, it's more concise and readable:

// Using Spread Operator
let originalArmors = ["Mark I", "Mark II", "Mark III"];
let copiedArmors = [...originalArmors];

Why is the spread operator better?

• Simplicity: More intuitive syntax.
• Readability: Clearly indicates copying.

If Tony adds a new armor to originalArmors, does it affect copiedArmors?

originalArmors.push("Mark IV");

console.log(originalArmors); // ?
console.log(copiedArmors); // ?

ANSWER

• originalArmors: ["Mark I", "Mark II", "Mark III", "Mark IV"]
• copiedArmors: ["Mark I", "Mark II", "Mark III"]
• Explanation: The spread operator creates a shallow copy. Changes to originalArmors don't affect copiedArmors.

PITFALL

The spread operator only creates a shallow copy. Nested objects or arrays are still referenced.

Merging Arrays

The Avengers and the Guardians of the Galaxy are teaming up. We need to merge their member lists.

Previously, we might use concat():

// Before ES6
var avengers = ["Iron Man", "Thor"];
var guardians = ["Star-Lord", "Rocket"];
var team = avengers.concat(guardians);

With the spread operator:

// Using Spread Operator
let avengers = ["Iron Man", "Thor"];
let guardians = ["Star-Lord", "Rocket"];
let team = [...avengers, ...guardians];

Why is the spread operator better?

• Flexibility: Easily add elements in between.
• Clarity: Shows the intent to merge arrays.

How can we add "Spider-Man" between the Avengers and the Guardians?

let team = [...avengers, "Spider-Man", ...guardians];
console.log(team);

ANSWER

["Iron Man", "Thor", "Spider-Man", "Star-Lord", "Rocket"]

Combining Arrays with New Elements

Thor wants to update his list of weapons by adding new ones.

let thorWeapons = ["Mjolnir", "Stormbreaker"];
let updatedWeapons = ["Gungnir", ...thorWeapons, "Jarnbjorn"];

How does the spread operator help here?

• Answer: It allows adding new elements at any position when creating a new array.

TASK

Create a new array avengersAssemble with "Captain America" at the start, followed by avengers, and "Hawkeye" at the end.

let avengers = ["Iron Man", "Thor", "Hulk"];

ANSWER

let avengersAssemble = ["Captain America", ...avengers, "Hawkeye"];

console.log(avengersAssemble);
// ["Captain America", "Iron Man", "Thor", "Hulk", "Hawkeye"]

The Spread Operator with Objects

Merging Objects

Tony wants to merge his AI assistant's settings with default settings.

Before ES6, merging objects required Object.assign():

// Before ES6
var defaultSettings = { volume: 50, brightness: 70 };
var userSettings = { brightness: 100 };
var finalSettings = Object.assign({}, defaultSettings, userSettings);

With the spread operator:

// Using Spread Operator
let defaultSettings = { volume: 50, brightness: 70 };
let userSettings = { brightness: 100 };
let finalSettings = { ...defaultSettings, ...userSettings };

Why is using the spread operator better?

• Conciseness: Less code, no need for Object.assign().
• Readability: Directly see which objects are being merged.

What is the value of finalSettings?

ANSWER

{ volume: 50, brightness: 100 }

PITFALL

Order matters. Properties in later objects overwrite earlier ones.

To visually compare the differences between the code before and after using the spread operator, let's present each case side by side in code blocks for a clearer view of the improvement:

---

Code Comparison: Before and After Spread Operator

Copying Arrays

Before Spread Operator:

// Before ES6
var originalArmors = ["Mark I", "Mark II", "Mark III"];
var copiedArmors = originalArmors.slice();

After Spread Operator:

// Using Spread Operator
let originalArmors = ["Mark I", "Mark II", "Mark III"];
let copiedArmors = [...originalArmors];

---

Merging Arrays

Before Spread Operator:

// Before ES6
var avengers = ["Iron Man", "Thor"];
var guardians = ["Star-Lord", "Rocket"];
var team = avengers.concat(guardians);

After Spread Operator:

// Using Spread Operator
let avengers = ["Iron Man", "Thor"];
let guardians = ["Star-Lord", "Rocket"];
let team = [...avengers, ...guardians];

---

Merging Objects

Before Spread Operator:

// Before ES6
var defaultSettings = { volume: 50, brightness: 70 };
var userSettings = { brightness: 100 };
var finalSettings = Object.assign({}, defaultSettings, userSettings);

After Spread Operator:

// Using Spread Operator
let defaultSettings = { volume: 50, brightness: 70 };
let userSettings = { brightness: 100 };
let finalSettings = { ...defaultSettings, ...userSettings };