Javascript Reference - JavaScript Array sort() Method

The Javascript Array sort() method sorts the items of an array either alphabetic or numeric, and either ascending or descending.

To perform a numeric sort, pass a function as an argument to the sort method.

The sort() method changes the original array.

Default sort order is alphabetic and ascending.

The sort() method calls the String() casting function on every item and then compares the strings.

This occurs even if all items in an array are numbers:


var values = [0, 1, 5, 10, 15]; 
values.sort(); 

console.log(values);

The code above generates the following result.

From the result we can see that the array is not sorted by numeric value.

Custom Sort

The following code shows how to use array.sort() with custom sorter function.

The sort() method can have a comparison function that indicates how to sort.

A comparison function accepts two arguments and returns

a negative number if the first is before the second
a zero if the arguments are equal,
a positive number if the first is after the second.


function defaultSort(elementX, elementY)
{/* w ww . ja v  a2s .  c o m*/
    if (elementX < elementY)
        return -1;
    if (elementX > elementY)
        return  1;
    return 0;
}
var mixture = new Array("red",4,"blue",2,"green",9);

mixture.sort(defaultSort);

var mj = mixture.join(", ");
console.log(mj);

The code above generates the following result.

Browser Support


`sort()`	Yes	Yes	Yes	Yes	Yes

Syntax

array.sort(sortFunction)

Parameter Values

Parameter	Description
sortFunction	Optional. A function to decide the sort order

Return Value

The sorted Array object.

Example

The following code shows how to sort an array of string values


<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Sort</button>
<p id="demo"></p>
<script>
var array1 = ["X", "B", "Z", "M"];
document.getElementById("demo").innerHTML = array1;
function myFunction() {<!--  w w w .  j  av a 2  s.c om-->
    array1.sort();
    document.getElementById("demo").innerHTML = array1;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to sort numbers numerically in ascending order.


<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Sort</button>
<p id="demo"></p>
<script>
var points = [4, 10, 111, 15, 215, 101];
document.getElementById("demo").innerHTML = points;
function myFunction() {<!-- w w w.j  a v  a2  s .  co  m-->
    points.sort(function(a, b){return a-b});
    document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to sort numbers numerically in descending order.


<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Sort</button>
<p id="demo"></p>
<script>
var points = [11, 2, 1, 25, 5, 10];
document.getElementById("demo").innerHTML = points;
<!--from  w w  w  .ja  va 2 s. c o  m-->
function myFunction() {
    points.sort(function(a, b){return b-a});
    document.getElementById("demo").innerHTML = points;
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to sort an array alphabetically in descending order.


<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Sort</button>
<p id="demo"></p>
<script>
var array1 = ["B", "A", "C", "A1"];
document.getElementById("demo").innerHTML = array1;
function myFunction() {<!-- www  . j a va  2s.co m-->
    array1.sort();
    array1.reverse();
    document.getElementById("demo").innerHTML = array1;
}
</script>

</body>
</html>

The code above is rendered as follows: