What is a shallow copy and why is it screwing up slice() ?

I’ve gotten weird results with Array.slice(). What’s going on?

slice() returns a copy of an array. This is awesome! But there’s this weird line in the MDN docs that says slice ‘returns a shallow copy’. The MSDN and W3Schools docs don’t mention this at all, so what in the world does this mean?

Let’s think back for a moment to how variables work. They’re basically just links to some other place on the hard drive where the actual data is stored.

What hapens if there are variables in my array?

What slice does is copy over the variable, not the data that variable points to. Say you make a change to the object a variable is pointing to. The ‘copied’ array will still include a variable pointing to that same object, which has now been changed.

Slice copies over variables as pointers, and does not create a copy of the data each variable points to.

How to create a ‘deep’ copy

Creating a ‘deep’ copy means your new copy will have no linkages to the original object. The easiest to create a deep copy by far is to use JSON.

1
2
var mySuperNestedArr = [myFavoriteSuperHeroesArr,myFavoriteCatGifsObj,taySwiftsEntireCatalogueObj];
var completelySeparateCopy = JSON.parse(JSON.stringify(mySuperNestedArr));

When you JSON.stringify a variable, it creates a whole new object. Then you can just immediately JSON.parse it, and blam, you have your totally separate copy!

One place you’ll find this particularly useful is when you want to avoid modifying objects you pass into functions as arguments.

Hope this helps!