Javascript's right-hand value changes itself in a loop?

Question

I wrote a code to animate 3D eyes in WebGL. Something that I don't understand is why a right-hand value in Javascript can change in a loop. Here are parts of the code:

function start() {
    ...
    if (GL) {
        ...
        tick();                       // For animation
    }
}

function tick() {
    requestAnimationFrame(tick);
    updateTime();
    drawScene();
}

function updateTime() {
    curTime = (new Date).getTime();
    if (lastTime) {                                 // Initial value: lastTime = 0
        var delta = curTime - lastTime;
        eyeFrame = Math.round((delta%60000)/20);    // Initial value: eyeFrame = 0
    } else {
        lastTime = curTime;
    }
}

function drawScene() {
    updateBuffers(eyeFrame);
    ...
}

function updateBuffers(idx) {
    curV = V;                         // V is the 3D coordinates, must not change
    for (i=0; i<2; i++) {
        for (j=0; j<329; j++) {
            curV[i][3*j] += (xEyes[i][4*j]*eyeMov[idx][0]+xEyes[i][4*j+1]*eyeMov[idx][1]+xEyes[i][4*j+2]*eyeMov[idx][2]+xEyes[i][4*j+3]*eyeMov[idx][3]);
            curV[i][3*j+1] += (yEyes[i][4*j]*eyeMov[idx][0]+yEyes[i][4*j+1]*eyeMov[idx][1]+yEyes[i][4*j+2]*eyeMov[idx][2]+yEyes[i][4*j+3]*eyeMov[idx][3]);
            curV[i][3*j+2] += (zEyes[i][4*j]*eyeMov[idx][0]+zEyes[i][4*j+1]*eyeMov[idx][1]+zEyes[i][4*j+2]*eyeMov[idx][2]+zEyes[i][4*j+3]*eyeMov[idx][3]);
        }
    }
    ...
}

The values of V, xEyes, yEyes, zEyes and eyeMov are read from files. The problem that I have is from the second visit to updateBuffers(), the value of V changes. But there is nowhere in the codes that V is on the left-hand side of the equation. Any suggestion how to fix this?

you pass only reference of V to curV so in fact, when you change curV you change V — magyar1984, Sep 16 '13 at 11:07

magyar1984 · Accepted Answer · 2013-09-17T09:43:26.603

Copy every property of old array to some new array in for loop

    var curV = [];
    for (var i=0, vl = V.length; i<vl ; i+=1) {
        curV[i] = V[i];
    }

If you need to do this often, generalize this into a function, that will return copy of array. You can also use slice method, as you noted bellow.

Javascript knows two date types - primitive types(string, boolean, number, undefined, null) and reference types (object). Primitive types 'hold' their value, reference types are just 'pointers' to some other place in memory. When you work with primitive, you work with the (constant size) value, when you work with reference, you work with pointer (because object size may vary).

That is, why you can not copy array directly. Becasue you copy just the pointer, not the value.

Slice and for loop copy return shallow copy - any reference types will be again just referenced.

Thanks. I have guessed about this, but I thought a simple assignment without loop works. Does Javascript always behave like this for arrays? — ArthurN, Sep 16 '13 at 11:23

score 1 · Answer 2 · edited May 23 '17 at 12:11

1

Copying array using = in Javascript is always by reference. To copy array by value, the method slice() should be used, as in this page: Create copy of multi-dimensional array, not reference - JavaScript.

edited May 23 '17 at 12:11

Community

1
1

answered Sep 17 '13 at 01:50

ArthurN

179
5
15

Javascript's right-hand value changes itself in a loop?

2 Answers2