Exercises: Array and Object Spread Syntax - Javascript In Depth

Let's get some practice with some exercises on the spread (...) operator in Javascript together. We look at some examples of spreading with Arrays, Objects as well as tricker concepts like shallow and deep copies.

Chapters:
00:00 Introduction
00:27 Warmup Exercise
02:26 Exercise 1
09:47 Exercise 2
19:21 Exercise 3
29:10 Next Steps

[simplyskandi]

Exercise-03 really helped me understand the concept of shallow copy vs actual copy. I have always found this concept super confusing and sort of glazed over it. Thank you for this brilliantly thought-through qs!

[khanittaajay]

Hello Nader! Great exercises! Thank you!

[Abulkhair]

const superhero = {
name:"Bruce Wayne", allies:"Batman", Universe: "DC", Happy:false, enmies:["Catwoman", "Joker", "Sucker"],
bestMOvies:{title:"Dark Knight", ranting:95}
}
const copy = {
...superhero
}

const copy1 = {
...superhero.enmies, 3:"Poison ivy"
}

const copy2 = {
...superhero.bestMOvies,

}

copy2.year=2008;
console.log(superhero);
console.log(copy);

[KRAKENBACK..]

While doing exercise 3 the way I did it was completley wrong LOL I thought it was asking us to create another copy but with only enemies and best movies, So i did / let enemies = superhero.enemies;
// let bestMovie = superhero.bestMovie;

// // console.log(enemies);
// // console.log(bestMovie);

// const superheroCopy = { enemies: enemies, bestMovie: bestMovie };
// console.log(superheroCopy);

// Ivy");

// superheroCopy.bestMovie.year = 2008;

But then watching the solution I totally understand how we were able to create a copy of the whole object and overwrite some of the properties to add different primitives and not change the original object. I was wondering why when solving the problem that this felt more of like a .push exercise and now I realize I was doing something entirely different then the question was asking 😂😂