ES6 Way to Clone an Array 🐑
When we need to copy an array, we often times used slice. But with ES6, you can also use the spread operator to duplicate an array. Pretty nifty, right 🤩
const sheeps = ['🐑', '🐑', '🐑']; // Old way const cloneSheeps = sheeps.slice(); // ES6 way const cloneSheepsES6 = [...sheeps];
Why Can’t I Use
= to Copy an Array?
Because arrays in JS are reference values, so when you try to copy it using the
= it will only copy the reference to the original array and not the value of the array. To create a real copy of an array, you need to copy over the value of the array under a new value variable. That way this new array does not reference to the old array address in memory.
const sheeps = ['🐑', '🐑', '🐑']; const fakeSheeps = sheeps; const cloneSheeps = [...sheeps]; console.log(sheeps === fakeSheeps); // true --> it's pointing to the same memory space console.log(sheeps === cloneSheeps); // false --> it's pointing to a new memory space
Problem with Reference Values
arrays are mutable. So this can happen:
const sheeps = ['🐑', '🐑']; const sheeps2 = sheeps; sheeps2.push('🐺'); console.log(sheeps2); // [ '🐑', '🐑', '🐺' ] // Ahhh 😱 , our original sheeps have changed?! console.log(sheeps); // [ '🐑', '🐑', '🐺' ]
That's why we need to clone an array:
const sheeps = ['🐑', '🐑']; const sheeps2 = [...sheeps]; // Let's change our sheeps2 array sheeps2.push('🐺'); console.log(sheeps); // [ '🐑', '🐑', '🐺' ] // ✅ Yay, our original sheeps is not affected! console.log(sheeps2); // [ '🐑', '🐑' ]
Mutable vs Immutable Data Types
All primitives are immutable.
Shallow Copy Only
spread only goes one level deep when copying an array. So if you're trying to copy a multi-dimensional arrays, you will have to use other alternatives.
const nums = [ [1, 2], , ]; const cloneNums = [...nums]; // Let's change the first item in the first nested item in our cloned array. cloneNums = '👻'; console.log(cloneNums); // [ [ '👻', 2 ], [ 10 ], [ 300 ] ] // NOOooo, the original is also affected console.log(nums); // [ [ '👻', 2 ], [ 10 ], [ 300 ] ]
🤓 Here's an interesting thing I learned. Shallow copy means the first level is copied, deeper levels are referenced.
Array.from is Another Way to Clone Array
const sheeps = ['🐑', '🐑', '🐑']; const cloneSheeps = Array.from(sheeps);
@hakankaraduman: yes, I try not to use spread, it confuses me when reading the code because it does two things, spreading or gathering according to context
CJ J: I think the best way is the one that most closely matches the semantics of the operation. I prefer to use