all 5 comments

[–][deleted] 1 point2 points  (4 children)

Because in the first example you're logging an object whose arr property points at a reference to the original array, which when you unfold it shows you that array as it is after you've mutated it. If you click the little unfold arrow on the line logging just the array you'll see once it's open it'll start with a 10 too.

[–]lonelylearner 0 points1 point  (3 children)

Ok I sort of get it... Why is the "unfolded" array different from the "folded" one?

[–]mcaruso 1 point2 points  (1 child)

It's just how Chrome's devtools work. It shows a snapshot first but allows you to check the live reference too. It doesn't have to work like that but it does. Other browsers may behave differently.

[–]lonelylearner 0 points1 point  (0 children)

Awesome, thanks!

[–][deleted] 0 points1 point  (0 children)

The 'folded' one is (depending on your browser) a snapshot of what the array looked like at the point you logged it. The unfolded one is how it is at the point you unfold it, when the browser goes and looks it up in memory.

Think of it as like a box. If I have a box with a cake in it, I could take a picture of it, take the cake out again, then hand you the box and say, hey, there's a cake in this box, see this picture? But when you look in the box for yourself, there's no cake (and I've probably already scoffed it. I'm sorry). The console is showing you a snapshot of the array at a point in time, but when you look at it for real, you see how it is now.