JavaScript Array sort() method sorts elements of an array in a specific order. This method makes very easy to reorder an array.
For example, you can use sort() method to arrange an array of numbers in numerical order, and an array of strings in alphabetical order such as a list of names.
Array.sort() method sorts elements of an array in its own place and returns sorted array. That is, the sort() method overwrites the original array. It does not create a new array.
The sort() method sorts the array elements in either alphabetic or numeric, and either ascending (up) or descending (down).
JavaScript Array Sort Method Syntax
The general syntax to define sort() method in JavaScript is as:
array.sort(compareFunction);
In the above function, compareFunction is an optional. It is used to define a custom sort order. This function returns a negative, zero, or positive value, depending on arguments.
When sort() method compares two values, it sends the values to the compare function, and sorts the values according to the outcome (negative, zero, positive) value.
If we do not specify “compareFunction”, JavaScript interpreter sorts elements of an array by converting them to strings and comparing strings in lexicographic order.
For example, “80” comes before “9” in lexicographic order, but in a numeric sort 9 comes before 80. As the numbers are converted to strings, so “80” comes before “9” in the Unicode order.
If an array has undefined elements, JavaScript interpreter sorts them at the end of an array.
Sorting Array of Elements in Alphabetical Order
If you call sort() method with no arguments, the array sort() method sorts elements of an array in alphabetical order. Let’s take an example program based on it.
Program code 1:
<script>
// Create an array of elements.
const names = ["Paul", "Tripti", "Sarah", "Ivaan", "Rashmi"];
const n = names.sort(); // passing no arguments.
document.write("Sorted names in alphabetical order: ", "<br>");
document.write(n);
</script>
Output:
Sorted names in alphabetical order:
Ivaan,Paul,Rashmi,Sarah,Tripti
Program code 2:
<script>
// Create an array of elements.
const names = ["Paul", "Tripti", "Sarah", "Ivaan", "Rashmi"];
names.sort(); // passing no arguments.
document.write("List of names in alphabetical order: ", "<br>");
for(let i = 0; i < names.length; i++)
{
document.write(names[i], "<br />");
}
</script>
Output:
List of names in alphabetical order:
Ivaan
Paul
Rashmi
Sarah
Tripti
Sorting Array Elements in Custom Order
To sort an array of element in a specific order other than alphabetical order, we must pass a comparison function as an argument to sort() method.
The comparison function gets two distinct array elements and compares them. It returns a number that decides which of its two argument values will appear first in the sorted array. That is, the number decides the result.
The comparison function will return a number less than zero if the first value will sort before the second.
If the first value sorts after the second in sorted array, the function will return a number greater than zero.
If both values are equivalent, the comparison function will return 0. Let’s write a general comparison function.
function compare(a, b) {
if (a > b) {
return 1;
} else if (b > a) {
return -1;
} else {
return 0;
}
}
Let’s take an example program to sort an array of elements in numerical order rather than alphabetical order.
Program code 3:
<script>
let nums = [55, 5, 1111, 222];
// Sorting array elements in alphabetical order.
let x = nums.sort();
document.write("Alphabetical order: ", "<br>");
document.write(x);
document.write("<br />");
// Sorting array elements numerical.
document.write("Numerical order: ", "<br>");
let y = nums.sort(function(a, b) {
return a - b; // returns < 0, 0, or > 0.
}
);
document.write(y);
</script>
Output:
Alphabetical order:
1111,222,5,55
Numerical order:
5,55,222,1111
Sorting Array of Numbers in Ascending Order
Let’s create a JavaScript program to sort an array of numbers in ascending order using a comparison function.
Program code 4:
<script>
let nums = [555, 30, 5, 40, 20, 10];
// Sorting array elements in ascending order.
document.write("Ascending order: ", "<br>");
let y = nums.sort(function(a, b) {
return a - b; // returns < 0, 0, or > 0.
}
);
document.write(y);
</script>
Output:
Ascending order:
5,10,20,30,40,555
Sorting Array Elements in Descending Order
Let’s create a JavaScript program to sort an array of numbers in descending order using a comparison function.
Program code 5:
<script>
let nums = [555, 30, 5, 40, 20, 10];
// Sorting array elements in descending order.
document.write("Descending order: ", "<br>");
let y = nums.sort(function(a, b) {
return b - a; // returns < 0, 0, or > 0.
}
);
document.write(y);
</script>
Output:
Descending order:
555,40,30,20,10,5
Sort Array Elements in Case-insensitive Alphabetical Order
We can also perform a case-insensitive alphabetical order using a comparison function. Let’s take an example program based on it.
Program code 6:
<script>
let colors = ["Red", "pink", "green", "Brown"];
// Sorting array elements in case-sensitive alphabetical order.
document.write("Case-sensitive sort: ", "<br>");
let x = colors.sort();
document.write(x);
document.write("<br/>");
document.write("Case-insensitive sort: ","<br/>");
let y = colors.sort(function(a, b) {
let p = a.toLowerCase();
let q = b.toLowerCase();
if(p < q) return -1;
if(p > q) return 1;
return 0;
}
);
document.write(y);
</script>
Output:
Case-sensitive sort:
Brown,Red,green,pink
Case-insensitive sort:
Brown,green,pink,Red
Sorting an Array of Objects by a Property Value
We can sort an array that contains objects based on the property values. Let’s take an example program in which we will sort an array of objects with people’s information.
Program code 7:
<script>
const people = [
{name: "Tripti", age: 23},
{name: "Ivaan", age: 5},
{name: "John", age: 20},
{name: "Tammy", age: 19}
];
// Sort the people from youngest to oldest by age.
people.sort(function(a, b) {
if(a.age < b.age) {
return -1;
} else if(a.age > b.age) {
return 1;
} else {
return 0;
}
});
console.log(people);
</script>
Output:
Ivaan, Tammy, John, Tripti
We can also write a much shorter comparison function like this:
people.sort(function(a, b) {
// Subtract ages to sort from youngest to oldest.
return a.age - b.age;
});
You can also write the above code with compact arrow syntax like this:
people.sort((a, b) => a.age - b.age);
We can also write a comparison function to sort by name as:
// Sort the people by name.
people.sort(function(a, b) {
const nameA = a.name.toUpperCase(); // ignore upper and lowercase
const nameB = b.name.toUpperCase(); // ignore upper and lowercase
if(nameA < nameB) {
return -1;
} else if (nameA > nameB) {
return 1;
} else {
return 0;
}
});
console.log(people);
// Using arrow function.
people.sort((a, b) => a.name.localeCompare(b.name));
console.log(people);
Output:
Ivaan, John, Tammy, Tripti
Program to Find Lowest Number and Highest Number
Let’s write a JavaScript program to find the lowest number and highest number among different numbers.
Program code 8:
<script>
const numbers = [40, 100, 10, 5, 25, 15];
// Sort the numbers in ascending order:
numbers.sort(function(a, b) {
return a - b;
});
document.write("Lowest number: " +numbers[0]);
</script>
Output:
Lowest number: 5
Program code 9:
<script>
const numbers = [40, 100, 10, 5, 25, 15];
// Sort the numbers in descending order:
numbers.sort(function(a, b) {
return b - a;
});
document.write("Highest number: " +numbers[0]);
</script>
Output:
Highest number: 100
We can also write the code for the above program like this:
Program code 10:
<script>
const numbers = [40, 100, 10, 5, 25, 15];
// Sort the numbers in ascending order:
numbers.sort(function(a, b) {
return a - b;
});
document.write("Highest number: " +numbers[numbers.length - 1]);
</script>
Browser Support
The sort() method is an important feature of ECMAScript1 (ES1). All browsers fully support ES1 (JavaScript 1997).
In this tutorial, you learned JavaScript array sort() method with various example programs. Hope that you will have understood the basic concepts of sort() method in JavaScript.
Thanks for reading!!!
Next ⇒ JavaScript array slice() method⇒ Prev Next ⇐