Newbie having some array problems

Question

I am doing my first code project and I am having some problems with arrays changing their values apparently on their own

console.log(permanentDeck) should return 7 cards, but they seem to have been taken off

I've checked more than once for any line that changes permanentDeck value, but didnt find none

Can someone help me figure out in which line this happens??


var playerClass = "Warrior"

const examcard1 = {id:1, cost: 1, name:"Slash", text:"Deal 100% damage"}
const examcard2 = {id:2, cost: 1, name:"Block", text:"Gain 1 block"}
const examcard3 = {id:3, cost: 2, name:"Heavy Strike", text:"Deal 200% damage\nApply 1 vunerable"}

const starterWarriorDeck = [examcard1, examcard1, examcard1, examcard2, examcard2, examcard2, examcard3]

var deck
var permanentDeck = []

switch(playerClass){

    case "Warrior":
        permanentDeck = starterWarriorDeck

}

var drawPile = []

var hand = []

function shuffle(array){
    let currentIndex = array.length,  randomIndex;
  
    // While there remain elements to shuffle.
    while (currentIndex != 0) {
  
      // Pick a remaining element.
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex--;
  
      // And swap it with the current element.
      [array[currentIndex], array[randomIndex]] = [
        array[randomIndex], array[currentIndex]];
    }
  
    return array;
}
function restockDrawPile(){
    drawPile = shuffle(deck);
}
function startBattle(){
    deck = permanentDeck;
    restockDrawPile();
}
function startPlayerTurn(){
    drawCards(5)
}

function drawCards(cardsToDraw){

    for(i = 0; i < cardsToDraw; i++){
    let nextCard = drawPile.pop();
    hand.push(nextCard);
}

}

var handView = new PIXI.Container()

startBattle();
startPlayerTurn();

console.log(permanentDeck);
console.log(deck);
console.log(drawPile);
console.log(hand);

´´´

score 1 · Accepted Answer · answered Jun 12 '22 at 21:54

if you add console.log(starterWarriorDeck);, you'll find that it has been modified as well. This is because arrays are passed by reference, so in the following lines, you're not making a copy of the array, just another reference to the same array:

permanentdeck = starterWarriorDeck;
deck = permanentdeck;   
console.log(Object.is(deck, starterWarriorDeck)) // true

You need to explicitly copy the contents into the new array. There are multiple methods of doing a shallow copy in JS, but the clearest ones in this case would be to use the spread operator ... , or the .from method. Examples:

permanentDeck = [...starterWarriorDeck]
deck = Array.from(permanentDeck)

Relevant info: https://www.freecodecamp.org/news/how-to-clone-an-array-in-javascript-1d3183468f6a/

score 1 · Answer 2 · answered Jun 12 '22 at 22:02

When you assign an array (e.g. permanentDeck) to a variable (e.g. deck) with deck = permamentDeck you just assign a reference the same underlying datastructure to deck. This means that deck and permanentDeck will both point to the same entity and if you modify any of the two you modify the same thing that both variables are referencing.

You'd need to make sure to make a true copy of the array to be able to modify deck without modifying permanentDeck One of the simple methods to achieve such a "shallow copy" is to use the slice function of a javascript array.

// make a shallow copy of the array 
deck = permanentDeck.slice();

Have a look at various methods to copy arrays. https://www.freecodecamp.org/news/how-to-clone-an-array-in-javascript-1d3183468f6a/

Also make sure you understand and you're aware of the difference between a shallow copy and deep copy of arrays consisting of object references.

Newbie having some array problems

2 Answers2