Javascript Object being changed when changing another object in the same array

Question

What appears to be happening is that player[0].pHand is being changed when i am altering player[1].pHand (pHand is an array that will contain objects)

for(var j = 0; j < 2; j++){


        console.log(cardDeck[deckCounter]);

        player[0].pHand[j] = cardDeck[deckCounter];

        player[0].cardNumber ++;


        console.log(player[0].pHand[j]);

        deckCounter ++;         

    } 


    for(var k = 0; k < 2; k++){


        console.log(cardDeck[deckCounter]);

        player[1].pHand[k] = cardDeck[deckCounter];

        player[1].cardNumber ++;


        console.log(player[1].pHand[k]);
        console.log(player[0].pHand[k]);

        deckCounter ++;         

    }

I have changed the code slightly for ease of explanation (i would have a loop for the player index and not 2 separate loops), but the same result occurs every time, where the last set of cards that are given to each player object. In the console the log are usually for example:

Card {suit: "Heart", faceValue: "10", value: 10, played: false, img: "10Heart.png"…}

Card {suit: "Heart", faceValue: "3", value: 3, played: false, img: "3Heart.png"…}

Card {suit: "Spade", faceValue: "J", value: 10, played: false, img: "JSpade.png"…}

Card {suit: "Spade", faceValue: "K", value: 10, played: false, img: "KSpade.png"…}

Any help or insight would be much appreciated :)

That's not suprising, as you're setting both to `cardDeck[deckCounter]`, which is probably the exact same object. A reference to the same object in both arrays, will mean changing that object in one place, changes it in the other places it's referenced as well. — adeneo, Feb 10 '16 at 15:17
If you want not to reflect changes of one object in to another assigned object then you will have to clone the object before assigning it to another object. — Nitin Garg, Feb 10 '16 at 15:20

score 0 · Accepted Answer · edited May 23 '17 at 11:45

Javascript usually uses references when assigning variables and you assign the same cardDeck-Object to both player's pHand-attribute. So for example:

var pHand = {a:1,b:2};

var player = [];
player[0] = {};
player[1] = {};

player[0].pHand = pHand;
player[1].pHand = pHand; // we assign a REFERENCE here

console.log(player[0].pHand);
console.log(player[1].pHand);

console.log("changing value of b for player 0");
player[0].pHand.b = 3;

console.log(player[0].pHand);
console.log(player[1].pHand);
// both consolel logs above will be identical!

For a "how to clone" a js-object you can check this post: How do I correctly clone a JavaScript object?

As long as your object is serializable (so e.g. does not contains functions but only arrays and objects) you can use this to create a simple, deep copy:

player[0].pHand = JSON.parse(JSON.stringify(pHand));

full example: https://jsfiddle.net/41f07f1a/

Thanks alot! It took me and all my computing teachers an hour trying to figure this out! — Joe Riemersma, Feb 10 '16 at 18:02

Javascript Object being changed when changing another object in the same array

1 Answers1