shuffle JavaScript Array

Question

Hy guys. I am making a game of Memory and to achieve that I had to somehow shuffle images in Array. I found an old answer on Stack Overflow, Fisher–Yates shuffle, and used that, and it works but I don't understand how. Can someone explain step by step and what each element represents in this code. Especially first line, how are there three values in a variable. Thank you.

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

Used like so:

var arr = [2, 11, 37, 42];
arr = shuffle(arr);
console.log(arr);

Answer 1

The first line is actually just shorthand for writing out three variables:

So, this:

var currentIndex = array.length, temporaryValue, randomIndex;

Translates to:

var currentIndex = array.length;   // 4
var temporaryValue;                // undefined
var randomIndex;                   // undefined

Answer 2

Break it into parts. Let's say the array length is n. We are starting with currentIndex = n, and we will continue until currentIndex = 0, which means that all elements have been iterated upon and moved to some location with a probability.

Getting inside the loop, the first line has two functions

• Math.random(): Generates a random real number in range [0, 1). Yes it's open at 1, so it doesn't generate 1 ever
• Math.floor(): Gives the integer part of the real number given to it as a parameter

Now observe, Math.random()*currentIndex will generate a random number in range [0, n) (basic multiplication). Math.floor() will take the integer part, so we will have an integer between {0, 1, 2, ... n-1}. This value is randomIndex.

Now we are simply swapping the numbers at currentIndex and randomIndex. We do this for all elements starting from the end. So the array is shuffled.

However, this is not a very good shuffling algorithm as you are reducing the scope of randomness with each iteration. A better shuffle would be to bind the numbers in pairs with random numbers, and then sort the pairs with those bound random numbers as keys, and get rid of them to have your original array of numbers shuffled.

Answer 3

var currentIndex = array.length, temporaryValue, randomIndex;

There are no 3 values in one variable, just 3 variables declared with one initialized and the others are undefined. Better format the code like this:

var currentIndex = array.length,
    temporaryValue,
    randomIndex;

---

while (0 !== currentIndex) {
    // ...
    currentIndex -= 1;
    // ...
}

currentIndex is going from array.length to 0, so array.length iterations

---

randomIndex = Math.floor(Math.random() * currentIndex);

random number from 0 to currentIndex - 1

---

temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;

swaps the elements at position randomIndex and currentIndex.

This should give you the basics to understand this code.

Answer 4

<p id="result">

<script>
var arrayList= ['a','b','c','d','e','f','g'];
arrayList.sort(function(){
    return 0.5 - Math.random()
})

document.getElementById("result").innerHTML  = arrayList;

</script>