Skip to main content
Noble Desktop/3 min read

Fisher-Yates Shuffle Algorithm

How Fisher-Yates Works

1

Iterate Backward

for (let i = arr.length - 1; i > 0; i--).

2

Pick a Random Index

const j = Math.floor(Math.random() * (i + 1)).

3

Swap in Place

[arr[i], arr[j]] = [arr[j], arr[i]] — destructuring trick.

4

Result: Uniform Shuffle

Every permutation equally likely — superior to .sort(() => Math.random() - 0.5).

Master Full Stack Development at Noble Desktop

Noble Desktop's Full-Stack Web Development Certificate covers HTML, CSS, JavaScript, and the modern web stack.

Today we're going to look at a classic coding algorithm called the Fisher-Yates Shuffle, which is used for randomizing the items of an array.

Video Transcription

Hello. My name is Brian McClain. I'm an instructor in JavaScript and Python programming at Noble Desktop in New York City. Today we're going to look at a classic coding algorithm called the Fisher-Yates Shuffle, which is used for randomizing the items of an array. You can read all about it on Wikipedia, but instead, we're going to just dive right in and look at a practical implementation of it.

So let's say you have a memory game such as this, which I made in JS, and you have to memorize the position of all these icons and make pairs out of them. I think I saw the apples and the baseballs and I don't remember any of the other stuff, but you could track it down and try to remember where things are as they come up and disappear.

But if we load it all again, things get moved. Now the apples are over here and the baseballs are down here. Where are you then? Okay, great. And I don't remember anything else. And if you load it again, everything is somewhere else, Let's check out the code. So, we have an array of the 30 items, alphabetized. We use the name in the array to load the image.

But, of course, it wouldn't be much of a memory game if all the items were in alphabetical order coming into the grid, so the first order of business is we have to shuffle it, and randomize all these items. To do that we use the Fisher-Yates Shuffle. We need a loop now. We're going to say it equals zero.

It is less than game icons that will I a plus classic for a loop every time through we're going to save the current item to a temporary variable. Then we're going to override the current item with a random item and then assign the temp item back to the random position—basically swapping them. We will generate a random integer in the range of the array index, which is 0 to 29.

Let's say: let r equal math-dot-floor (Math.floor()) math-dot-random(Math.random()) times gameIcons dot length (gameIcons.length). This gives us an integer in the 0 to 29 range. And then we're going to set the current item, which is gameIcons[i], equal to a temp variable. Anchor is the first item, and let's say the first random number is 24—the index of the seahorse. In that case, we would replace the anchor with the seashorse.

But then we would have two seahorses, so that's why we saves the anchor to the variable called temp. So then, we replace the seahorse at index 24 with temp, which is set equal to anchor. And with that, the anchor at index 0 has been swapped with the seahorse at index 24.

To see if it works, we'll console.log the array, gameIcons, and check the console. There it is: totally randomized: So it worked! Thank you very much for watching;; that concludes this presentation on the Fisher-Yates algorithm. My name is Brian McClain. I am with Noble Desktop in New York, where we have JavaScript Full-stack Web development bootcamp and a Python Data Science bootcamp, among other subjects that we teach, both in-person and live online. Thanks for watching.