Question

It seems like JavaScript somehow tries to optimize code, so if we want to fill a multidimensional array (largeArr) with changing values of one-dimensional array (smallArr) within a loop and use this code:

largeArr = []
smallArr = []

for (i=0; i<2; i++)
{
    smallArr[0]=i
    smallArr[1]=2*i

    largeArr[i]=smallArr
}

we get an unexpected result: largeArr=[[1,2],[1,2]] (must be [[0,0],[1,2]]). So, Javascript calculates smallArr values in the first place, and only then fills largeArr.
To get the right result we must declare smallArr in the loop:

largeArr = []

for (i=0; i<2; i++)
{
    smallArr = []
    smallArr[0]=i
    smallArr[1]=2*i

    largeArr[i]=smallArr
}

and then it works as expected (largeArr=[[0,0],[1,2]]).

Why does it behave this way?

Answer 1

Because Pointers, that’s why. Javascript takes after Java, and C, in this (and only this) way. When you do the assignment

largeArr[i] = smallArr

you’re assigning a pointer. A breakdown of pointers:

In C, (and to a lesser extent, Java and Javascript) you don’t have a basic array type – instead, an array points to a space in memory, and you can fill that space with whatever information you want (or rather, you’ve declared). The way a pointer exists in memory? A four (or eight, or two, depending on your system) byte memory address, which tells the compiler/parser where to get the appropriate in formation. So, when you do that assignment there, you’re telling it: “Hey, set largeArr[i] equal to the memory address of smallArr.” Thus, when you make changes to smallArr, it’s reflected every time you dereference the array – because it’s actually the same array. But when you do:

smallArr = [] 

inside the loop, you’re saying, “make a new array, and set smallArr equal to the address of that array.” That way, the arrays stay separate.