Sort Array in Random Order using Javascript Shuffle Function

JavaScript Array sort() Method is used to sort items of an array according to a sort fuction which compares items one by one with each other. If developer can create a sort function which returns random results, a javascript shuffle function or javascript random sort function can be created.

If you develop online HTML or HTML5 games using Javascript, you will certainly require a random function to sort items in a javascript array object. In this tutorial I will try to explain how developers can create javascript shuffle function to sort items stored in an array randomly.

If developer does not provide a sort function and use Array Sort method without an argument, Javascript engine will sort array items in alphabetic order as ascending.

Random Sort Array in Javascript Sample Code

Below Javascript code first defines an array of 10 items.
As a second step with in the Javascript For Loop assigns numbers to array items.
Following For Loop in below Javascript code writes the array item values on the screen to let you see what is stored in the array.


var n = 10;

var numbers = new Array(n);



for (i = 1; i <= n; i = i + 1) {

 numbers[i] = i;

}



document.write('numbers are displayed as inserted in order' + '
');

for (i = 1; i <= n; i = i + 1) {

 document.write(numbers[i] + '<br />');

}

Code

Let me now explain the Javascript codes that is executed when you press "Sort array in random order" button.

A user defined javascript function named sort_array_randomly() is called. This function first displays some descriptive text on the screen. Then execute Javascript Array.Sort() method with a second function name (random_sort) as an argument.

You can see the javascript sort function random_sort codes as well below.
In fact the sorting rules applied to the array items are defined by this sort function.
If web developers check the codes of sort function random_sort() they will see it consists of a single line of code calling Math.random() method. The random sorting among the array items take place in this sort function.


function random_sort(a, b) {

 return Math.random() - 0.5;

}



function sort_array_randomly() {

 numberList.innerHTML = 'numbers are displayed in random order' + '<br />';



 numbers.sort(random_sort);



 for (i = 0; i < n; i = i + 1) {

  numberList.innerHTML = numberList.innerHTML + numbers[i] + '<br />';

 }

}

Code

When you press "Sort using default function" button, Array.Sort() method is called without any arguments as you can see below.


function sort_default() {



 numbers.sort();



 for (i = 0; i < n; i = i + 1) {

  RandomSortArray.innerHTML = RandomSortArray.innerHTML + numbers[i] + '<br />';

 }

}

Code

Javascript Array.Sort() method by default sorts the array items according to alphabetical order.
Although array values are numeric, since default Sort() method is alphabetical 1 and 10 are next to each other in the default sort order.

Test the above Javascript shuffle function to see if it can successfully sort array items randomly or not.

Below numbers in number array are sorted randomly using Javascript Array.Sort() method with Math.Random() used as sort function

Below numbers in numbers array are sorted by default function of the Array.Sort() method. By default Array.Sort() uses alphabetic sort in ascending order

Code