fCC Challenge : Copy an Array with the Spread Operator --> Is It Better?

Copy an Array with the Spread Operator

I get that it’s a lesson and we are being taught something; but, given the fact that there is a simpler way to do this…

Is using the spread operator to copy an array somehow better? If so, how and why?


let thisArray = [true, true, undefined, false, null];
// let thatArray = [...thisArray];

let thatArray = thisArray;

console.log(thisArray);
console.log(thatArray);

fCC Challenge : Copy an Array with the Spread Operator → Another Way to Do It…

thisArray[0] = 42;
console.log(thisArray);
console.log(thatArray);

I’m not sure what you are suggesting… that using the spread operator will mirror the array being copied so that the copy stays in sync when the original array is changed?

What do you see when you run that code when you use the spread operator vs when you don’t?

Well by itself? Or like this? 3xt8fjppu - JavaScript - OneCompiler

By itself would error out but as seen as shown in the following I can see its the other way round from what I described. Using the spread operator copies it once but using the equal operator mirrors it.

let thisArray = [true, true, undefined, false, null];
let thatArray = [...thisArray];

// let thatArray = thisArray;

// console.log(thisArray);
// console.log(thatArray);


thisArray[0] = 42;
console.log(thisArray);
console.log(thatArray);

And without the spread operator, like in the first post?

Well that does mirror changes

I think I see what’s up though. There is a difference between the two so you would have to choose the right approach based on your need.

Difference Between Different Ways of Copying an Array

Thanks

If you want to actually copy, then you need to use the spread.

Variables in Javascript can only hold one value. For more complex data, like objects and arrays, the variable stores the location of the object or array in memory. So the code in the first post creates a new variable that points to the same place in memory. The spread operator makes a new array in another place in memory.

1 Like

Now THAT is very good to learn! Very good! Appreciate you pointing that out.

1 Like

Hi

I’ll try to explain the difference here.

What you are doing here is not copying the array, rather you are creating a reference to the original array.
Now if you do thatArray[0] = false; and try logging console.log(thisArray) you will see that the value of thisArray (which is the main array) has changed. In other words, you havent copied the array, rather you accessed it with a different variable.

Now lets see what happens when you use the spread operator with an example →

let thisArr = ["One", "Two", "Three"];
let thatArr = [...thisArr];
thatArr[0] = "Ten";
console.log(thatArr); //outputs ["Ten", "Two", "Three"]
console.log(thisArr); //outputs ["One", "Two", "Three"]

As you can see the origial array hasnt changed rather, you could modify the array you wanted to change(the copied array) without modifying the original one.

Arrays are mutable and in some cases in real life situations, you dont want that so you might need to occassionally use the spread operator to copy the array rather than accessing it.

Hope this helped :slight_smile:

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.