Create account

DEV Community

Deep vs Shallow Copy - with Examples

Laurie on July 24, 2019

I wrote a post a couple of weeks back about the spread operator. 5 Uses for the Spread Operator Lauri...

Read full post

Julian Garamendy • Jul 24 '19 • Edited

Hi! Thank you for writing this!
I came across some unexpected results the other day. It may be worth sharing:

const arr = [1,2,3];
arr[10] = 11; // (why would anyone do this is beyond me)

arr.forEach((n,i) => console.log(i,n))
// 0 1
// 1 2
// 2 3
// 10 11

arr.slice().forEach((n,i) => console.log(i,n))
// 0 1
// 1 2
// 2 3
// 10 11

[...arr].forEach((n,i) => console.log(i,n))
// 0 1
// 1 2
// 2 3
// 3 undefined
// 4 undefined
// 5 undefined
// 6 undefined
// 7 undefined
// 8 undefined
// 9 undefined
// 10 11

Laurie • Jul 24 '19 • Edited

Oh interesting. I just played around with this a bit. And found this.

> let arr = [1,2,3]
> arr[10] = 11
11
> arr
[ 1, 2, 3, <7 empty items>, 11 ]

So it makes sense that the spread syntax would copy that same array.

According to the spec, forEach elides missing array items, so all of those undefined elements won't be accounted for. Why it doesn't in the final case I don't know. Will have to come back and look into a bit.

Thanks for the example!

Julian Garamendy • Jul 24 '19

I just didn't know that arr.slice() and [...arr] are not equivalent.

Here's another example, without forEach.

arr.slice() vs [...arr]

const arr = [{name:'A'},{name:'B'},{name:'C'}]
arr[10] = {name:'D'}

console.log(arr.slice().map(obj => obj.name)) // ["A", "B", "C", empty × 7, "D"]
console.log([...arr].map(obj => obj.name)) // Uncaught TypeError: Cannot read property 'name' of undefined

Laurie • Jul 24 '19

So this is what I see

let arr = [1,2,3]
> arr[5] = 1
> arr.slice()
[ 1, 2, 3, <2 empty items>, 1 ]
> [...arr]
[ 1, 2, 3, undefined, undefined, 1 ]

But no docs are telling me why that's the case. Still searching because I genuinely want to know!

Laurie • Jul 24 '19 • Edited

So the difference is holes in an array versus undefined elements. And that happens due to this:

John Hardy

@jhlagado

The difference is that the spread operation creates an iterator which maps over all the elements. slice() operates at a lower level. twitter.com/laurieontech/s…

21:53 PM - 24 Jul 2019

Laurie @laurieontech
Hey, @bitandbang, any idea what the underlying reason for this difference is? I've been scouring the docs and can't seem to find anything that implies the two results would be any different. https://t.co/aCRfd5jblA

0 1

Also explained this way:

Anna ⚧

@addaleax

@laurieontech @WesleydeSouza @bitandbang Yeh, my bad :)

In [...arr], what the spread operator conceptually does is to get an iterator from arr (like for (const item of arr) { ... }), and the iterator returns undefined when it encounters a hole, rather than skipping it

21:54 PM - 24 Jul 2019

0 2

Julian Garamendy • Jul 25 '19

Awesome! Thank you!

Cécile Lebleu • Jul 24 '19

This is a great write up! Thank you for sharing. I do have a question though.
I don’t understand the example about nested objects; why is copy in the end still the same as the original obj? I feel that with the accompanying explanation maybe the snippet is wrong, but I don’t know much about how these details work; would you mind explaining this one a bit further?

let obj = {a:1, b:2, c: {a:1}}
let copy = {...obj}
obj['c']['a'] = 5
// obj is {a:1, b:2, c: 5}
// copy is {a:1, b:2, c: {a:1}}

Laurie • Jul 24 '19

I wrote out a full explanation and the realized the snippet is indeed wrong! Thanks for catching that.

Cécile Lebleu • Jul 24 '19

Thanks for clearing it out!

stereobooster • Jul 24 '19

cursed code

function structuralClone(obj) {
  const oldState = history.state;
  history.replaceState(obj, document.title);
  const copy = history.state;
  history.replaceState(oldState, document.title);
  return copy;
}