JavaScript Tutorial - Sorting Numeric Array

Posted by Hitesh Agrawal

November 14, 2007

In JavaScript whenever you want to sort an array it gets sorted alphabetically. This means that numbers are sorted on the basis of the first digit occurring in number system(1 - 9) and not by comparing the value. So if i want to sort an array having values 10,12,11,20,2,25,30 gets sorted to 10,12,11,20,2,25,30 using inbuilt JavaScript array sort method.

Example - Traditional Array Sort Method

<script type="text/javascript">
     var marks = new Array(10,12,11,20,2,25,30);
     marks.sort(); 
     document.write(marks);
</script>

Output: 10,11,12,2,20,25,30
Here you see that the number 2 is coming after 12 and before 20 before the numbers are getting sort based on the first digit and next digit.

So to sort an array in JavaScript Numerically following techniques can be used:
Bubble Sort

This is one of the traditional sorting techniques used in Data Structures in C, C++ programming languages. In this technique the numbers are compared with each other and depending on the values they are exchanged.
Example - Sorting using Bubble Sort Technique
<script type="text/javascript">
        var marks = new Array(10,12,11,20,2);
        for(var i=0;i<marks .length;i++) //Hold the first element
	{
		for(var j=i+1;j<marks.length;j++) //Hold the next element from the first element
		{
			if(Number(marks[i]) > Number(marks[j]))	//comparing first and next element
			{
				tempValue = marks[j];	
				marks[j] = marks[i];
				marks[i] = tempValue;
			}
		}
	}
        document.write(marks);
</marks></script>
Output: 2,10,11,12,20
Here you see that i am creating a temporary variable to hold the value so that the data can be exchanged.

Using Prototype Function

Protoype Function in JavaScript can override the existing functionality of the Object. So now with this technique array.sort can do numeric sort operation provided you have provided the functionality for sorting numeric data.
Example - Prototype Function
<script type="text/javascript">
Array.prototype.sort = function()
{
	for(i=0;i<this .length;i++)
	{
		for(j=i+1;j<this.length;j++)
		{
			if(Number(this[i]) >Number(this[j]))
			{
				tempValue = this[j];
				this[j] = this[i];
				this[i] = tempValue;
			}
		}
	}
}
var marks = new Array(10,12,11,20,2);
marks.sort();
document.write(marks);
</this></script>
Output: 2,10,11,12,20
Here i am overriding the existing array sort method by calling bubble sort method inside it. So now .sort() method will sort it numerically and not alphabetically.

Change the Functionality of Existing Sort Method

In this technique we will pass an parameter to an array sort function which is a function that will contains the instructions on how to compare the array elements.
Example:

<script type="text/javascript">
function ArraySortAscending(a, b)  //Sort array in ascending order
{	
	return (a-b); 
}
 
function ArraySortDescending(a, b)  //Sort array in descending order
{	
	return (b-a); 
}
 
var marks = new Array(10,12,11,20,2);
marks.sort(ArraySortAscending);	//This will sort the array in ascending order
document.write(marks + '\n');
 
var marks = new Array(10,12,11,20,2);
marks.sort(ArraySortDescending); //This will sort the array in descending order
document.write(marks);
</script>

Output:
2,10,11,12,20
20,12,11,10,2

Bookmark It

Hide Sites

Custom Search

Javascript

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.