Javascript Array Difference with Different Initialization Method

Question

Can someone explain to me why the following happens in Javascript Console (Node 7.2.0):

Array in example I has different behavior than example II and III

EXAMPLE I

> var x = new Array(3).fill(new Array(2).fill(0))
> x
[ [ 0, 0 ], [ 0, 0 ], [ 0, 0 ] ]
> x[0][0] = 1;
> x
[ [ 1, 0 ], [ 1, 0 ], [ 1, 0 ] ]

EXAMPLE II

> var y = [...new Array(3)].map(()=>{return [...new Array(2)].map(()=>0)})
> y
> [ [ 0, 0 ], [ 0, 0 ], [ 0, 0 ] ]
> y[0][0] = 1
> [ [ 1, 0 ], [ 0, 0 ], [ 0, 0 ] ]

EXAMPLE III

> var y = []
> y.push([ 0, 0 ])
> y.push([ 0, 0 ])
> y.push([ 0, 0 ])
> y
> [ [ 0, 0 ], [ 0, 0 ], [ 0, 0 ] ]
> y[0][0] = 1
> [ [ 1, 0 ], [ 0, 0 ], [ 0, 0 ] ]

It seems that different ways to initialize array will cause different behaviors of an array. I'm confused and thank you in advance.

mscdex · Accepted Answer · 2016-12-06 00:06:14Z

7

array.fill() returns the modified array, so you're filling an array with multiple references to the same array. That is why when you modify it in one place, it automatically shows up in the other places.

The first example is equivalent to doing something like:

var arr = [ 0, 0 ];
var x = [ arr, arr, arr ];

answered Dec 6, 2016 at 0:06

mscdex

107k15 gold badges201 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

WreckingBall Over a year ago

I don't think so, I specifically used the new operator to create a new array for fill function to avoid using the same reference.

mscdex Over a year ago

new Array() creates a single array once. array.fill() does not make copies, it just assigns the array elements to whatever you pass to it (which in this case is a single array).

RyanZim · Accepted Answer · 2016-12-06 00:12:27Z

The reason for the difference is that in JS, objects (including arrays) are not copied, they are linked. In example I, you fill the array with a single array.

> var x = new Array(3).fill(new Array(2).fill(0))
// You have filled x with three links to the same array
> x
[ [ 0, 0 ], [ 0, 0 ], [ 0, 0 ] ]
> x[0][0] = 1;
// You have now modified the actual array, this change is reflected in all the links to it.
> x
[ [ 1, 0 ], [ 1, 0 ], [ 1, 0 ] ]

What you are doing is the same as doing:

var a = [ 0, 0 ]
var x = [ a, a, a ]

OR

var a = [ 0, 0 ]
var x = []
x.push(a)
x.push(a)
x.push(a)

BTW, using new Array() is generally a bad practice. There is no benefit over the array literal syntax. Also, using new Array(n) makes "empty slots" in your array, which is very odd and can cause problems in your programs if you don't fill all the slots.

Collectives™ on Stack Overflow

Javascript Array Difference with Different Initialization Method

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related