Changing an array variable in javascript also changes the arrays value on earlier points in the code

Question

I am trying to make a card game simulator, but have problems with my deck array.

let colors = ["heart","diamond","spade","club"];
let numbers = ["ace","2","3","4","5","6","7","8","9","10","jack","queen","king"];

function createDeck(){
  let card = {};
  let counter = 0;
  let cards = [];
  for (let i = 0; i<colors.length;i++){
    for (let j = 0; j<numbers.length; j++){
        card = {
        color: colors[i],
        number: numbers[j]
      }
      cards[counter] = card;
      counter ++;
    }
  }
  return cards;
}

function shuffle(array){
  for(let i = array.length -1; i > 0; i--){
    const j = Math.floor(Math.random() * i)
    const temp = array[i]
    array[i] = array[j]
    array[j] = temp
  }
}

let deck = createDeck();
console.log(deck);
shuffle(deck);
console.log(deck);

Both of the console logs outputs the shuffled array.

I have tried with another array to test it, and then it works.

let test = [1,2,3]
console.log(test);
shuffle(test);
console.log(test);

This outputs the unshuffled array first, and then the shuffled array.

try console.log(JSON.stringify(deck)); then it won't be both the same - the console evaluates arrays and objects when you view them in the console ... so, it's not a snapshot as such, unless you make it one ... alternatively console.log(deck.slice()) - then you are logging an array that can't change — Bravo
– Bravo, Commented Nov 2, 2019 at 8:43
This outputs the unshuffled array first, and then the shuffled array. no .. it does not — Bravo
– Bravo, Commented Nov 2, 2019 at 8:48
The console log on the test array does output two different arrays in my case. The first unshuffled and the second shuffled. — tobben
– tobben, Commented Nov 2, 2019 at 8:54

KooiInc · Accepted Answer · 2019-11-02 10:11:53Z

Arrays are references (are addressed by reference, see also), so everything you do to an instance of it will mutate it. You should perform the shuffle to a copy of deck if you want to preserve the original Array.

let colors = ["heart","diamond","spade","club"];
let numbers = ["ace","2","3","4","5","6","7","8","9","10","jack","queen","king"];

function createDeck(){
  let card = {};
  let counter = 0;
  let cards = [];
  for (let i = 0; i<colors.length;i++){
    for (let j = 0; j<numbers.length; j++){
        card = {
        color: colors[i],
        number: numbers[j]
      }
      cards[counter] = card;
      counter ++;
    }
  }
  return cards;
}

function shuffle(array){
  for(let i = array.length -1; i > 0; i--){
    const j = Math.floor(Math.random() * i)
    const temp = array[i]
    array[i] = array[j]
    array[j] = temp
  }
  return array;
  // ^ the copy should be returned
}

let deck = createDeck();
console.log(deck.slice(0, 3));
const shuffled = shuffle(deck.slice(0));
//                       ^ this creates a copy of deck
console.log(shuffled.slice(0, 3));

.as-console-wrapper { top: 0; max-height: 100% !important; }

Bojoer · Accepted Answer · 2019-11-12 04:16:12Z

To make a copy of an array and not a second variable which is just by reference to the other array use the Array.from(); method.

Test this example and replace the Array.from(); by just =

const myOrigArray = [...Array(500).keys()].map(x => ++x).sort(() => Math.random() - 0.5);
const myArray = Array.from(myOrigArray);
myArray.splice(Math.floor(Math.random() * myOrigArray.length), 1);
const intersection = myOrigArray.filter(x => !myArray.includes(x));

console.log(intersection);

Just a way to create an array containing 500 random integer values between 1 and 500, randomly remove an element from the array and then verify which was removed by comparing/differentiating the original array and the one with the randomly removed value.

Collectives™ on Stack Overflow

Changing an array variable in javascript also changes the arrays value on earlier points in the code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related