Shuffle An Array (JavaScript)

An obstacle that comes up more times than you’d expect is shuffling an array. Whether you need to mix, scramble, or randomize a series in an array… having this handy will make life much easier rather than spending the time to try and figure this out every time. As always, if you have any questions about code, tech, or career, feel free to reach out to me on Twitter!

For this example, we will be taking in a single array of elements.

function shuffleArray(array) {
  let currentIndex = array.length;
  let temporaryValue, randomIndex;
  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
 
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  };
  return array;
};

There’s a lot of numbers bouncing around back and forth with this code, but it starts to make more sense as we see it played out. When shuffleArray is called, it takes in the parameters of a single array. Next we set our currentIndex equal to the length of the array (that way every item in the array has an opportunity to join our new list) and we instantiate temporaryValue and randomIndex to use for later.

We then enter into a while loop to allow us to shuffle each element in our array. This is where the bread and butter of our code is housed. We start off by setting our randomIndex equal to a random number that is within our currentIndex (achieved through the Math.random method). After selecting this number, we then reduce the currentIndex by one so we don’t repeat ourselves and to eventually bring our loop to an end.

Next comes our shuffle. This part is a bit confusing, but after letting it settle in our head, it will become much easier to understand. We start this part by setting our temporaryValue equal to the element in the currentIndex of our array. An easier way to think about this is that our temporaryValue becomes the last element in the array. We then we take our element in the randomIndex position of our array and move that to the end (our currentIndex). We then finish this cycle of our loop by replacing our randomIndex position of our array with the temporaryValue which was the last element of our array at the beginning of the cycle. Then we loop again.

As you may have noticed, we are dropping the currentIndex by one each time we loop. We are essentially picking a random element and replacing it with the last element in the array, then running through that cycle excluding the elements we’ve already placed in the back. In the case that the randomIndex is the last index in the array, that element stays put and the cycle excludes it in the following loop as normal.

We top this off by returning the array at the end which is now shuffled around. *Ta-da!*

BONUS

If we are trying to combine a couple of arrays and shuffle them, we just need to add and change couple lines of code.

function shuffleArray(array1, array2) {
  let newArray = [];
  newArray.push(...array1, ...array2);
  let currentIndex = newArray.length;
  let temporaryValue, randomIndex;
  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
 
    temporaryValue = newArray[currentIndex];
    newArray[currentIndex] = newArray[randomIndex];
    newArray[randomIndex] = temporaryValue;
  };
return newArray;
};

The two new lines of code we added were right at the beginning. Since we need to combine the two arrays to shuffle, we combine them at the start. We then take that new array and use it throughout the rest of the algorithm, so its important we make sure the new array is called throughout the function.