Javascript array.push on clone array modify original array

Question

I found a really weird (for me) problem

I have this global variable ARRAY

var A = [1,2,3,4]

then inside a function, I made local var and assign previous global var to it

function someFunc() {
     var X = A;
}

I then made another local Var and assign it with the first local var's value

var Y = X;

I then push a new value to Y

Y.push(6);

but the, the new value (6) didn't only pushed to Y, but also to the 2 original array (X and A). What happened? Doesn't it supposed to only change Y?

Please help, thank you.

Here is my full code:

var A = [1,2,3,4];


function someFunc(){
    var X = A;
    var Y = X;
    Y.push(6);
    console.log(A);
    console.log(X);
    console.log(Y);
}

$("#test").click(function(){
    someFunc();
});

as you can see, it is triggered by clicking on element with id #test.

All three console.log, even thought represent different variable, it return the same result, ARRAY with 6 on it

Edit. Yes there is a similar question to this, but even though the problem is similar and the solution is identical, but the initial understanding is what different. In my question, I initially asked "Why", because I am not aware of those variable actually 'refer' to same array instead of 'assigning', so I have no idea if I should search for how to assign instead of refer, since I assumed that using = means assigning, sorry

You are not copying the array. To copy it, use Object.assign (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign), or use `let copy = [...original]` if you are copying a list — Seblor, Mar 01 '18 at 13:51
*"Javascript array.push on clone array modify original array"* It's **not** a clone, it's just two variables referring to the *same* array. Naturally, since there's only one array, you see the modifications regardless of which variable you use to get to the array to modify it. This is a duplicate, just a matter of finding the best dupetarget to point you at. — T.J. Crowder, Mar 01 '18 at 13:51

score 1 · Accepted Answer · answered Mar 01 '18 at 13:51

1

What happens is that you do not copy the array you just reference it. You can use the method slice to create a copy of it:

var X = A.slice();

Do mind that you can use this approach only with primitive values. Check this if you need to deal with objects How do you clone an Array of Objects in Javascript?

answered Mar 01 '18 at 13:51

Giannis Mp

1,291
6
13

oh i see, seems like i have miss understanding, i tough you could assign an array to variable with "=", so it seems it only reffered to it. Alrrightm that make sense now, thankyou – Gita Prasetya Adiguna Mar 01 '18 at 14:11
You are welcome, check also the duplicate to your question – Giannis Mp Mar 01 '18 at 14:12
yep, edited my question, i didn't see the other question because unlike the author of the other question, i am not initially aware of refferencing – Gita Prasetya Adiguna Mar 01 '18 at 14:37

score 0 · Answer 2 · answered Mar 01 '18 at 13:52

Your arrays aren't cloned: assigning a variable does not clone the underlying object.

You can shallow-clone an array using the slice method:

var cloned = original.slice();

But array and object items within the array are not cloned using this method. Numbers and strings are cloned, however, so this should work fine for your case.

score 0 · Answer 3 · answered Mar 01 '18 at 13:56

0

An array in JavaScript is also an object and variables only hold a reference to an object, not the object itself. Thus both variables have a reference to the same object.

answered Mar 01 '18 at 13:56

Salman Saleem

439
4
14

Javascript array.push on clone array modify original array

3 Answers3

Linked