current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 3 down vote favorite
1

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?

share|improve this question
    
The same reference to the array is inserted into largeArr in the first case, so modification in the 2nd time looping around will just modify the content of the single actual array, whose reference is inserted twice in the largeArr. –  nhahtdh Dec 3 '12 at 22:01
    
It might help you when testing code like this to insert breakpoints in your javascript using the developer tools. That way you'd be able to see that the result is not due to optimization, though if you don't know what a pointer is I imagine it would still be fairly mind-boggling. –  Jeff Dec 3 '12 at 22:05
add comment

4 Answers

up vote 4 down vote accepted

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.

share|improve this answer
    
Yup. To the OP, as an experiment, assign largeArr[0][0] = 3 and then look at the contents of largeArr. –  Jeff B Dec 3 '12 at 22:02
    
that's right! forgot about pointers. –  user1765283 Dec 3 '12 at 22:06
1  
smallArr.slice() does the trick –  user1765283 Dec 3 '12 at 22:12
add comment
up vote 0 down vote

With the line largeArr[i]=smallArr, you set the i property to a reference to the smallArr. You do not copy it. In the end, all properties of the largeArr will point to the same one smallArr, where you have overwritten the values each time.

By initializing the smallArr each loop turn, you create new objects; so each property of largeArr will point to a different array. Btw, it is an assignment, not a declaration - you would (and should) declare the variables as local (to the function) with a var statement.

share|improve this answer
add comment
up vote 0 down vote

In the last for iteration 

smallArr[0]=i
smallArr[1]=2*i

(where i=1) the above code is transformed into : 

smallArr[0]=1
smallArr[1]=2

And your big array is nothing than this : 

[smallArr, smallArr]

which leads to the unexpected result : 

[[1, 2], [1, 2]]

In javascript objects are copyed by reference (a kind of c style pointer).
In order to have the desired result, you must copy the array by value, or assign a different array in each loop : 

var largeArr = [];

for (i=0; i<2; i++)
   largeArr[i] = [[i, 2*i]];
share|improve this answer
add comment
up vote 0 down vote

When you assign an array reference as you have above, you're not assigning the values of that array, but just a reference to the array.

Think of it as a pointer. largeArr[0] and largeArr[1] are pointing to smallArr, and the loop iterations are simply changing the contents of smallArr. The thing to which largeArr is being "pointed" is not changing.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.