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. 

javascript

<script>

// Declare and initialize original array
var marks = [12, 25, 31, 23, 75, 81, 100];

// Print Before Sorting 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 Sorted 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. 

javascript

<script>

// Declare and initialize an Array
var marks = [12, 25, 31, 23, 75, 81, 100];

// Print Before sorting 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. 

javascript

<script>

// Declare and initialize an Array
var marks = [12, 25, 31, 23, 75, 81, 100];

// Print Before sorting 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:

javascript

<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 sorting 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