How to Sort Numeric Array using JavaScript ?

The JavaScript Array.sort() method is used to sort the array elements in-place and returns the sorted array. This function sorts the elements in string format. It will work good for string array but not for numbers. For example: if numbers are sorted as string, than “75” is bigger than “200”.

Example:

Input          : [12, 25, 31, 23, 75, 81, 100]
Wrong Output   : [100, 12, 23, 25, 31, 75, 81]
Correct Output : [12, 23, 25, 31, 75, 81, 100]

Example: This example sorts the array elements in string format.

<script>  
  
// Declare and initialize original array 
var marks = [12, 25, 31, 23, 75, 81, 100]; 
      
// Print Before Sortring Array  
document.write("Original Array</br>");  
document.write(marks);  
      
document.write("</br>");  
  
// Call sort function 
marks.sort(); 
  
document.write("</br>After Sorting in Ascending Order</br>");  
      
// Print Srted Numeric Array  
document.write(marks);  
      
</script> 

Output:

Original Array
12,25,31,23,75,81,100

After Sorting in Ascending Order
100,12,23,25,31,75,81

Then, how to sort number array elements ?
There are two approaches to sort the number array in ascending order.

Using Compare Function
By Creating Loops

Using Compare Function: We can create a Compare function that return negative, zero, or positive values.
Syntax:

function(a, b){return a - b}

Negative Value ( a > b) => a will be Place before b
zero value (a == b) => No Change
Positive Value (a < b ) => a will be place after b

Example: This example uses compare function to sort the array elements in ascending order.

<script>  
  
// Declare and initialize an Array 
var marks = [12, 25, 31, 23, 75, 81, 100]; 
      
// Print Before sortring array  
document.write("Original Array</br>");  
document.write(marks);  
      
document.write("</br>");  
      
// Sort elements using compare method  
marks.sort(function(a, b){return a - b}); 
  
document.write("</br>After sorting in Ascending order</br>");  
      
// Print sorted Numeric array  
document.write(marks);  
      
</script> 

Output:

Original Array
12,25,31,23,75,81,100

After sorting in Ascending order
12,23,25,31,75,81,100

Now, we would like to sort the array in Descending order than we have to change the compare function.

Syntax:

function(a, b){return b - a}

Negative Value ( b < a) => a will be Place after b
zero value (a == b) => No Change
Positive Value (b > a ) => a will be place before b

Example: This example uses compare function to sort the array elements in descending order.

<script>  
  
// Declare and initialize an Array 
var marks = [12, 25, 31, 23, 75, 81, 100]; 
      
// Print Before sortring array  
document.write("Original Array</br>");  
document.write(marks);  
      
document.write("</br>");  
      
// Sort elements using compare method  
marks.sort(function(a, b){return b - a}); 
  
document.write("</br>After sorting in Ascending order</br>");  
      
// Print sorted Numeric array  
document.write(marks);  
      
</script> 

Output:

Original Array
12,25,31,23,75,81,100

After sorting in Ascending order
100,81,75,31,25,23,12

Creating Loops: We can also use loops to sort the array elements. Here, we will use bubble sort (simple sorting technique) to sort the array elements in ascending order.

Example:

<script>  
  
// Sorting function 
function Numeric_sort(ar) { 
      
    var i = 0, j;  
      
    while (i < ar.length) {  
        j = i + 1;  
        while (j < ar.length) { 
              
            if (ar[j] < ar[i]) { 
                var temp = ar[i];  
                ar[i] = ar[j];  
                ar[j] = temp;  
            }  
            j++;  
        }  
        i++;  
    }  
}  
  
// Original Array 
var arr = [1, 15, 10, 45, 27, 100]; 
      
// Print Before sortring array  
document.write("Original Array</br>");  
document.write(arr);  
      
document.write("</br>");  
      
// Function call  
Numeric_sort(arr);  
      
document.write("</br>Sorted Array</br>");  
      
// Print sorted Numeric array  
document.write(arr);  
      
</script> 

Output:

Original Array
1,15,10,45,27,100

Sorted Array
1,10,15,27,45,100

My Personal Notes

Recommended Posts: