How to shuffle an array in JavaScript more than once

Question

I've been reading about the best way to perform a shuffle on an array in JavaScript and have come across the Fisher-Yates model (in this article and in this article). I've tried using both example functions pointed to in the articles but when I want to shuffle the array more than once and assign different results to two different variables, they end up exactly the same.

    function shuffle(array) {
    var i = 0,
        j = 0,
        temp = null

    for (i = array.length - 1; i > 0; i -= 1) {
        j = Math.floor(Math.random() * (i + 1))
        temp = array[i]
        array[i] = array[j]
        array[j] = temp
    }
    return array;
}

var deck = ["bat", "black-cat", "blood", "bone", "brain", "broom", "candle", "candy", "castle", "cauldrom", "coffin", "costume", "death", "devil", "fish-bone", "full-moon", "ghost", "grave", "grave-yard", "half-moon", "horror", "lantern", "magic", "monster", "owl", "pumpkin", "skull", "spider", "spider-web", "tree", "tree-2", "witch", "witch-hat", "zombie-1", "zombie-2"];



var playerHand = shuffle(deck);
var computerHand = shuffle(deck);

console.log(playerHand);
console.log(computerHand);

In the console playerHand returns:

["castle", "costume", "coffin", "candy", "blood", "death", "horror", "skull", "spider", "broom", "owl", "tree", "spider-web", "pumpkin", "grave", "devil", "brain", "ghost", "witch-hat", "magic", "bat", "black-cat", "full-moon", "tree-2", "cauldrom", "bone", "grave-yard", "half-moon", "zombie-1", "lantern", "monster", "zombie-2", "candle", "fish-bone", "witch"]

And computerHand returns:

["castle", "costume", "coffin", "candy", "blood", "death", "horror", "skull", "spider", "broom", "owl", "tree", "spider-web", "pumpkin", "grave", "devil", "brain", "ghost", "witch-hat", "magic", "bat", "black-cat", "full-moon", "tree-2", "cauldrom", "bone", "grave-yard", "half-moon", "zombie-1", "lantern", "monster", "zombie-2", "candle", "fish-bone", "witch"]

This is probably super simple, but I'm stumped. I thought calling the function again would return a different result.

It could be that you are using the same seed, meaning reproducible results, check out this question, it may help a bit: https://stackoverflow.com/questions/29068435/math-random-keeps-returning-the-same-answer — G. LC, Sep 11 '18 at 16:32
You are shuffling the array in place. All of your variables point to the same array object, so when you shuffle it, they all see the change. See also: https://stackoverflow.com/questions/13104494/does-javascript-pass-by-reference — Ian McLaird, Sep 11 '18 at 16:34

score 2 · Accepted Answer · answered Sep 11 '18 at 16:35

Your function shuffles there array "in-place" - that is, it is changing the array and not creating a new one.

Since it's the same array in the second call you're "loosing" the first shuffle result.

To solve this, create a clone of the array:

var playerHand = shuffle(deck.slice());
var computerHand = shuffle(deck.slice());

How to shuffle an array in JavaScript more than once

1 Answers1