Discussion on: Deep vs Shallow Copy - with Examples

[Julian Garamendy]

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]

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]

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]

Awesome! Thank you!