Modifying a JavaScript object causes changes to another object within the same array

Question

Modifying a JavaScript object causes changes to another object within the same array

Encountering an issue where player[0].pHand is being modified while updating player[1].pHand (where pHand is an array containing 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 ++;         

    }

Tweaked the code slightly for clarity, having a loop for the player index instead of two separate loops. However, the issue persists with the final set of cards assigned to each player object. The console logs typically show:

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"…}

Help or insights would be greatly appreciated :)

javascript arrays loops object

Answer 1

Answer №1

Javascript typically utilizes references when assigning variables, meaning that both players' pHand attributes are assigned the same cardDeck Object. For instance:

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 console logs above will be identical!

To learn "how to clone" a JavaScript object, refer to this post: How do I correctly clone a JavaScript object?

If your object is serializable (does not contain functions, only arrays and objects), you can create a simple deep copy using this method:

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

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

Answer 2

Javascript typically utilizes references when assigning variables, meaning that both players' pHand attributes are assigned the same cardDeck Object. For instance:

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 console logs above will be identical!

To learn "how to clone" a JavaScript object, refer to this post: How do I correctly clone a JavaScript object?

If your object is serializable (does not contain functions, only arrays and objects), you can create a simple deep copy using this method:

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

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

Modifying a JavaScript object causes changes to another object within the same array

Answer №1

Similar questions

Utilizing Node.js callback for validating JWT tokens

Tips on adding several elements to an array depending on the selected value from various checkboxes?

Shifting a division using insertAfter

Building a NodeJS powered single page application that consumes API data

Use Ajax to fetch a nested PHP array in JSON format

The ajax request does not support this method (the keydown event is only active during debugging)

C implementation of insertion sort is failing to properly traverse through the array

One way to dynamically track if any radio buttons in a group have been selected is by utilizing JQuery

Is it possible to utilize "this" in mapMutations spread within Vue instance methods?

Grant permission to access a website even when domain filtering is enabled

How can I toggle the radio button based on the dropdown selection?

Create a script that allows users to input 10 numbers, and then displays the largest number out of all the inputs

What is the best way to ensure uniform container sizes and properly align images within them?

Adding a Vue component to HTML using a script tag: A step-by-step guide

tips for optimizing javascript file caching

The issue with json arises when utilizing $.ajax without the definition$

The straightforward onclick action only functioned once

Running the npm install command will eliminate any external JS or CSS files that are being

Guide on adding user input values (type=text) into HTML using JavaScript function outcome

AngularJS: Monitoring $locationChangeStart for token verification