SQL Server administration and T-SQL development, Web Programming with ASP.NET, HTML5 and Javascript, Windows Phone 8 app development, SAP Smartforms and ABAP Programming, Windows 7, Visual Studio and MS Office software Kodyaz Development Resources
Development resources, articles, tutorials, samples, codes and tools for .Net, SQL Server, Windows, Windows Phone, SAP and ABAP, like SAP UI5, Screen Personas, etc.






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 />');
}

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 />';
 }
}

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 />';
 }
}

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






Javascript

Javascript Articles

Javascript Forums












Javascript Tutorials, Articles and Javascript Codes

Morris Number Sequence Puzzle Solution in Javascript
Javascript Array Puzzle: People with Sword Around a Circle
Sort Array in Random Order using Javascript Shuffle Function
Javascript MultiDimensional Array example codes
How many times a day a clock's hands overlap?
Javascript For Loop Sample Code
Use Javascript Replace Function Example to Replace Multi Space in a String with Single Space
Javascript String Trim with Javascript Trim Function Examples
Javascript String Split Function Example & Split Javascript Tutorial
Javascript Phone Format : Phone Number Format and Mask Telephone Numbers with Javascript
How to Enable / Disable Submit Button using Javascript According to any CheckBox is Checked on a WEB Page
Error Handling in JavaScript using Try...Catch Statement
How to display or unhide hidden table rows and hide or toggle a table row using Javascript functions
How to Replace All Occurrences of a String using Javascript Replace Function
How to autoformat and mask telephone numbers with Javascript
How to get key codes of characters using javascript code and key code list
Javascript Forums




Copyright © 2004 - 2017 Eralper YILMAZ. All rights reserved.
Community Server by Telligent Systems