Reference arrays in JS functions

Question

I'm writing some script and so next problem occurred. I've got multiple functions: A returns bool, B and C return nothing.

if (A(array1, array2, array3, int1, int2, int3, int4, bool)) {
        B(array1, array2, array3, int1, int2, int3, int4, bool);
    }

B looks like:

B(array1, array2, array3, int1, int2, int3, int4, bool){
    C(array1, array2, array3, int1, int2, int3, int4, bool);
    someCode;
}

C looks like:

C(array1, array2, array3, int1, int2, int3, int4, bool){
    array1 = thisFunctionChangesArrayInside(array1, some, parameters);
    array2 = thisAnotherFunctionChangesArrayInside(array2, some, parameters);
    someCode;
}

Both of thisFunctionChangesArrayInside() and thisAnotherFunctionChangesArrayInside() returns arrays.

Why is it incorrect? (why arrays don't change?)

EDIT:

thisFunctionChangesArrayInside and thisAnotherFunctionChangesArrayInside functions:

function nowaPozycjaKolor(kolor, x1, y1, x2, y2) {
    var pomocniczaKolor = new Array();       //tablica zupełnie pomocnicza
    for (var i = 0; i < 8; i++) {            //ona reprezentuje kolory
        pomocniczaKolor[i] = new Array();
        for (var j = 0; j < 8; j++) {
            pomocniczaKolor[i][j] = kolor[i][j];
        }
    }
    pomocniczaKolor[x2][y2] = pomocniczaKolor[x1][y1];
    pomocniczaKolor[x1][y1] = 0;
    return pomocniczaKolor;
}

function nowaPozycjaFigur(figury, x1, y1, x2, y2) {
    var pomocniczaFigur = new Array();       //tablica zupełnie pomocnicza
    for (var i = 0; i < 8; i++) {            //ona reprezentuje figury
        pomocniczaFigur[i] = new Array();
        for (var j = 0; j < 8; j++) {
            pomocniczaFigur[i][j] = figury[i][j];
        }
    }
    pomocniczaFigur[x2][y2] = pomocniczaFigur[x1][y1];
    pomocniczaFigur[x1][y1] = 0;
    return pomocniczaFigur;

}

NOT SOLUTION as for me:

function nowaPozycjaKolor(kolor, x1, y1, x2, y2) {
    kolor[x2][y2] = kolor[x1][y1];
    kolor[x1][y1] = 0;
    return kolor;
}

function nowaPozycjaFigur(figury, x1, y1, x2, y2) {
    figury[x2][y2] = figury[x1][y1];
    figury[x1][y1] = 0;
    return figury;

}

This almost works as I want to:

function makeNewArray(x) {
        // make copy of array passed in
        var y = x.slice(0);
        // modify the copy
        y[3]=10;
        y[4]=20;
        return y;
    }

    function funkcja(a){
        a = makeNewArray(a);
    }

    var arr = [1,2,3];
    alert(arr);                 // [1,2,3]
    funkcja(arr);
    alert(arr);                 // [1,2,3]   
    alert(makeNewArray(arr));   // [1,2,3,10,20]
    alert(arr);                 // [1,2,3]
    arr = makeNewArray(arr);
    alert(arr);                 // [1,2,3,10,20]

SOLVED:

function makeNewArray(x) {
    // make copy of array passed in
    var y = x.slice(0);
    // modify the copy
    y[3]=10;
    y[4]=20;
    return y;
}

function funkcja(a){
    for(var i=0;i<5;i++){
        a[i] = makeNewArray(a)[i];
        //alert(a[i]);
        }
}

var arr = [1,2,3,4,5];
alert(arr);                 // [1,2,3]
funkcja(arr);
alert(arr);                 // [1,2,3,10,20]   
alert(makeNewArray(arr));   // [1,2,3,10,20]
alert(arr);                 // [1,2,3,10,20]
arr = makeNewArray(arr);
alert(arr);                 // [1,2,3,10,20]

I think the function name is wrong, it should probably be `thisAnotherFunctionChangesArrayInsideTheOtherFunctionThatIsReallyGreat` — adeneo, Dec 15 '13 at 00:14
Because `array1` and `array2` are local variables. Assigning a new value to a local variables doesn't change the value of the variable you passed as argument. — Felix Kling, Dec 15 '13 at 00:14

score 0 · Answer 1 · edited May 23 '17 at 10:32

0

Assuming what you posted is pseudo code, the problem is that C does not change the arrays it's being passed. Instead, it assigns new values to the variables holding the arrays, which is different. JavaScript does not have pointers, the array references are passed by value (if that sounds confusing, see Is JavaScript a pass-by-reference or pass-by-value language?).

edited May 23 '17 at 10:32

Community

1
1

answered Dec 15 '13 at 00:15

bfavaretto

71,580
16
111
150

Am I supposed then to create new local arrays inside C and in loop assign them all new variables? – adam Dec 15 '13 at 00:23
Actually, the problem is in the functions called by C, so you'll have to show us their code. – bfavaretto Dec 15 '13 at 00:25
Okay, so my answer stands: neither function modify the arrays being passed in (kolor and figury). They just return new arrays. Sorry for not being more specific, but I'm not sure what you're trying to do. See the question I linked, it should clarify why you're having this problem. – bfavaretto Dec 15 '13 at 00:37

jfriend00 · Accepted Answer · 2013-12-15T01:36:06.013

If you want an array passed as an argument to be changed, then you have to MODIFY the array, not assign the argument variable something else.

Passing an array or an object as a function argument makes a new variable (an argument to the function) and puts in that variable a ptr to the original array or object.

Thus, if you use that argument to modify the array or object, then the original array or object is modified via the pointer to the original object. But if you assign a new value to that argument, then it's just a variable that now points to a different object. The other variable has not changed and still points to the original object, but the new variable now points to a new object and the two no longer have anything in common.

Modify passed array:

var arr = [];
function modifyMyArray(x) {
   // change the array that was passed
   x.push(1);
}
modifyMyArray(arr);
console.log(arr.length);   // shows 1

Assign argument value something else:

var arr = [];
function modifyMyArray(x) {
   // assign the argument variable to hold a different array
   // does not affect arr
   x = [1,2,3];
}
modifyMyArray(arr);
console.log(arr.length);   // shows 0

Outside of a function, it works the same way:

var arr = [1,2,3];
var x = arr;
console.log(x);    // shows [1,2,3] because x contains a ptr to the same array as arr
x = ["a", "b"];
console.log(arr);  // show [1,2,3] because x has just been assigned a different array
                   //    and arr was unaffected by that assignment

To create a new array and return it:

function makeNewArray(x) {
    // make copy of array passed in
    var y = x.slice(0);
    // modify the copy
    y.push(10);
    y.push(20);
    return y;
}

var arr = [1,2,3];
var z = makeNewArray(arr);
console.log(z);     // [1,2,3,10,20]

This would help me if I hadn't needed these functions to return anything, but they just have to return these arrays not overwrite them, becouse sometimes I use them to overwrite an array and sometimes only to get one. Any other ideas? — adam, Dec 15 '13 at 01:14
@user3103257 - You have a variety of choices. 1) You can modify an existing array that was passed in (thus modifying the original). 2) You can create a new array and return it. 3) You can make a copy of an array passed in, modify that copy and return it. You can code any of those depending upon what you want a given function to do. Beyond explaining how arrays passed as arguments work (which I've done), I'm not sure what other question you have. — jfriend00, Dec 15 '13 at 01:19
I would love to create a new array and return it if it worked... I think I will leave them like they was and write two new which modify existing arrays using these (left) functions. But it's 2:30 AM. Good night. — adam, Dec 15 '13 at 01:30
@user3103257 - I added an example at the end of my answer that creates a new array and returns it. — jfriend00, Dec 15 '13 at 01:36

Reference arrays in JS functions

2 Answers2