Changing value of array at one index location changes value at other locations as well

Question

I am trying to change the value of a 2D array at index location [0][0], however the value at [1][0] gets changed as well. A different approach yields the correct value change at [0][0] without affecting any other value. Unable to understand the difference between the 2 methods.

Method 1:

function abc1(){

    var dimArr=[2,3];
    var arr=[];
    var val=0;
    for (var i=dimArr.length-1; i>=0; i--)
   {
     arr = [];
     for(var k=0; k<dimArr[i]; k++)
     arr.push(val);

     val = arr;

   }    
   return arr;
}

Method 2:

function abc2(){

    var outterArray = [];

    for(var i=0; i<2; i++)
    {
        var innerArray = [];
        for(var j=0; j<3; j++)
        {
            innerArray.push(0);
        }
        outterArray.push(innerArray);
    }

    return outterArray;
}

When I run the script:

var d2= abc1();

d2[0][0]='a';

console.log(d2);

var d3= abc2();

d3[0][0]='a';

console.log(d3);

The variable d2 logs:

[["a", 0, 0], ["a", 0, 0]]

The variable d3 logs:

[["a", 0, 0], [0, 0, 0]]

Any ideas why?

Your first one just put the same `val` to `arr`, when its `array`, it means you put the 2 reference to that `array` into `arr`, so when you changed the first ones value, the second also reflect the change, you can use `d2[0] === d2[1]` to see that they're the same. — fuyushimoya, Oct 15 '15 at 10:34
And in `abc2`, in each `i` iteration, you use `var innerArray = [];` to create a new array, so changes to one would not reflect on another. — fuyushimoya, Oct 15 '15 at 10:36
@fuyushimoya By that logic, if the innerArray is initialized outside the for loop, it should show similar result as the first method but it doesn't. — Anish Shah, Oct 15 '15 at 10:39
No it should not. If you put it outside, you just first push 3 `0` to it, then put it to outerarray, then put another 3 `0`, and put to outer array again, then you should get `[[0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0]]`. And in this case, `d3[0][0] = 'a'` will cause `d3[1][0]` becomes `a`, similar to first case. — fuyushimoya, Oct 15 '15 at 10:42

score 1 · Accepted Answer · edited May 23 '17 at 12:22

In simple words:

a = [1,2,3];
b = a;

// Only change in array a 
a[0] = 10;    
// will give you [10, 2, 3] as you set b= a so its points to same address which is a its not a copy of the array its pointing to same array
console.log(b);

if you checked this Question Copying array by value in JavaScript copy array by default is by reference a is holding a refrence to the array and when you say b=a so you allow b to point to same location a is pointing to, BUT if you need to copy array by value you will need to do as poiniting in the Post b = a.slice();

And that what happeaned in function abc1() val pushed to arr and in second loop you pushed val again which is still pointing to same array so what you have is [pointer to array1, pointer to array1] so its exactly same array, so when you change value [0][0] it will change the value and the 2 pointer which is pointing to the same array will show you same result.

and as you can see in your function abc2() it say var innerArray = []; so you created a new refrence to a new array and not pointing to the old innerArray array.

Changing value of array at one index location changes value at other locations as well

1 Answers1