JavaScript Array sort: Sorting Array Elements
Summary: in this tutorial, you will learn how to use the JavaScript Array sort()
method to sort arrays of numbers, string, and objects.
Introduction to JavaScript Array sort()
method
The sort()
method allows you to sort elements of an array in place. Besides returning the sorted array, the sort()
method changes the positions of the elements in the original array.
By default, the sort()
method sorts the array elements in ascending order with the smallest value first and largest value last.
The sort()
method casts elements to strings and compares the strings to determine the orders.
Consider the following example:
let numbers = [0, 1 , 2, 3, 10, 20, 30 ];
numbers.sort();
console.log(numbers);
Code language: JavaScript (javascript)
The output is:
[ 0, 1, 10, 2, 20, 3, 30 ]
Code language: JSON / JSON with Comments (json)
In this example, the sort()
method places 10 before 2 because the string “10” comes before “2” when doing a string comparison.
To fix this, you need to pass a compare function to the sort()
method. The sort(
) method will use the compare function to determine the orders of elements.
The following illustrates the syntax of the sort()
method:
array.sort(comparefunction)
Code language: CSS (css)
The sort()
method accepts an optional argument which is a function that compares two elements of the array.
If you omit the compare function, the sort()
method sorts the elements with the sort order based on the Unicode code point values of elements as mentioned earlier.
The compare function of the sort()
method accepts two arguments and returns a value that determines the sort order. The following illustrates the syntax of the compare function:
function compare(a,b) {
// ...
}
Code language: JavaScript (javascript)
The compare()
function accepts two arguments a
and b
. The sort()
method will sort elements based on the return value of the compare()
function with the following rules:
- If
compare(a,b)
is less than zero, thesort()
method sortsa
to a lower index thanb
. In other words,a
will come first. - If
compare(a,b)
is greater than zero, thesort()
method sortb
to a lower index thana
, i.e., b will come first. - If
compare(a,b)
returns zero, thesort()
method considers a equals b and leaves their positions unchanged.
To fix the issue of sorting the number, you can use the following syntax:
let numbers = [0, 1 , 2, 3, 10, 20, 30 ];
numbers.sort( function( a , b){
if(a > b) return 1;
if(a < b) return -1;
return 0;
});console.log(numbers);
Code language: JavaScript (javascript)
Output:
[ 0, 1, 2, 3, 10, 20, 30 ]
Code language: JSON / JSON with Comments (json)
Or you can define the comparison function using the arrow function syntax:
let numbers = [0, 1 , 2, 3, 10, 20, 30 ];
numbers.sort((a,b) => {
if(a > b) return 1;
if(a < b) return -1;
return 0;
});console.log(numbers);
Code language: JavaScript (javascript)
And the following is the simplest since the elements of the array are numbers:
let numbers = [0, 1, 2, 3, 10, 20, 30];
numbers.sort((a, b) => a - b);console.log(numbers);
Code language: JavaScript (javascript)
Sorting an array of strings
Suppose you have an array of string named animals
as follows:
let animals = [
'cat', 'dog', 'elephant', 'bee', 'ant'
];
Code language: JavaScript (javascript)
To sort the elements of the animals
array in ascending order alphabetically, you use the sort()
method without passing the compare function as shown in the following example:
let animals = [
'cat', 'dog', 'elephant', 'bee', 'ant'
];
animals.sort();console.log(animals);
Code language: JavaScript (javascript)
Output:
[ 'ant', 'bee', 'cat', 'dog', 'elephant' ]
Code language: JSON / JSON with Comments (json)
To sort the animals
array in descending order, you need to change the logic of the compare function and pass it to the sort()
method as the following example.
let animals = [
'cat', 'dog', 'elephant', 'bee', 'ant'
];animals.sort((a, b) => {
if (a > b)
return -1;
if (a < b)
return 1;
return 0;
});
console.log(animals);
Code language: JavaScript (javascript)
Output:
[ 'elephant', 'dog', 'cat', 'bee', 'ant' ]
Code language: JSON / JSON with Comments (json)
Suppose you have an array that contains elements in both uppercase and lowercase as follows:
// sorting array with mixed cases
let mixedCaseAnimals = [
'Cat', 'dog', 'Elephant', 'bee', 'ant'
];
Code language: JavaScript (javascript)
To sort this array alphabetically, you need to use a custom compare function to convert all elements to the same case e.g., uppercase for comparison and pass that function to the sort()
method.
let mixedCaseAnimals = [
'Cat', 'dog', 'Elephant', 'bee', 'ant'
];mixedCaseAnimals.sort(function (a, b) {
let x = a.toUpperCase(),
y = b.toUpperCase();
return x == y ? 0 : x > y ? 1 : -1;
});
Code language: JavaScript (javascript)
Output:
[ 'ant', 'bee', 'Cat', 'dog', 'Elephant' ]
Code language: JSON / JSON with Comments (json)
Sorting an array of strings with non-ASCII characters
The sort()
method is working fine with the strings with ASCII characters. However, for the strings with non-ASCII characters e.g., é, è, etc., the sort()
method will not work correctly. For example:
let animaux = ['zèbre', 'abeille', 'écureuil', 'chat'];
animaux.sort();console.log(animaux);
Code language: JavaScript (javascript)
As you see, the écureuil
string should come before the zèbre
string.
To resolve this, you use the localeCompare()
method of the String
object to compare strings in a specific locale, like this:
animaux.sort(function (a, b) {
return a.localeCompare(b);
});
console.log(animaux);
Code language: JavaScript (javascript)
Output:
[ 'abeille', 'chat', 'écureuill', 'zèbree' ]
Code language: JSON / JSON with Comments (json)
The elements of the animaux
array now are in the correct order.
Sorting an array of numbers
Suppose you have an array of numbers named scores
as in the following example.
let scores = [
9, 80, 10, 20, 5, 70
];
Code language: JavaScript (javascript)
To sort an array of numbers numerically, you need to pass into a custom comparison function that compares two numbers.
The following example sorts the scores
array numerically in ascending order.
let scores = [
9, 80, 10, 20, 5, 70
];
// sort numbers in ascending order
scores.sort((a, b) => a - b);console.log(scores);
Code language: JavaScript (javascript)
Output:
[ 5, 9, 10, 20, 70, 80 ]
Code language: JSON / JSON with Comments (json)
To sort an array of numbers numerically in descending order, you just need to reverse the logic in the compare function as shown in the following example:
let scores = [
9, 80, 10, 20, 5, 70
];
// descending order
scores.sort((a, b) => b - a);
console.log(scores);
Code language: JavaScript (javascript)
Output:
[80, 70, 20, 10, 9, 5]
Code language: JSON / JSON with Comments (json)
Sorting an array of objects by a specified property
The following is an array of employee
objects, where each object contains three properties: name
,salary
and hireDate
.
let employees = [
{name: 'John', salary: 90000, hireDate: "July 1, 2010"},
{name: 'David', salary: 75000, hireDate: "August 15, 2009"},
{name: 'Ana', salary: 80000, hireDate: "December 12, 2011"}
];
Code language: JavaScript (javascript)
Sorting objects by a numeric property
The following example shows how to sort the employees by salary
in ascending order.
// sort by salary
employees.sort(function (x, y) {
return x.salary - y.salary;
});console.table(employees);
Code language: JavaScript (javascript)
Output:
This example is similar to the example of sorting an array of numbers in ascending order. The difference is that it compares the salary
property of two objects instead.
Sorting objects by a string property
To sort the employees
array by name
property case-insensitively, you pass the compare function that compares two strings case-insensitively as follows:
employees.sort(function (x, y) {
let a = x.name.toUpperCase(),
b = y.name.toUpperCase();
return a == b ? 0 : a > b ? 1 : -1;
});console.table(employees);
Code language: JavaScript (javascript)
Sorting objects by the date property
Suppose, you wish to sort employees based on each employee’s hire date.
The hire date data is stored in the hireDate
property of the employee object. However, it is just a string that represents a valid date, not the Date
object.
Therefore, to sort employees by hire date, you first have to create a valid Date
object from the date string, and then compare two dates, which is the same as comparing two numbers.
Here is the solution:
employees.sort(function (x, y) {
let a = new Date(x.hireDate),
b = new Date(y.hireDate);
return a - b;
});console.table(employees);
Code language: JavaScript (javascript)
Optimizing JavaScript Array sort()
method
In fact, the sort()
method calls the compare function multiple times for each element in the array.
See the following example:
let rivers = ['Nile', 'Amazon', 'Congo', 'Mississippi', 'Rio-Grande'];rivers.sort(function (a, b) {
console.log(a, b);
return a.length - b.length;
});
Code language: JavaScript (javascript)
Output:
Amazon Nile
Congo Amazon
Congo Amazon
Congo Nile
Mississippi Congo
Mississippi Amazon
Rio-Grande Amazon
Rio-Grande Mississippi
How it works:
- First, declare an array
rivers
that consists of the famous river names. - Second, sort the
rivers
array by the length of its element using thesort()
method. We output the elements of therivers
array to the web console whenever thesort()
method invokes the comparison function .
As shown in the output above, each element has been evaluated multiple times e.g., Amazon 4 times, Congo 2 times, etc.
If the number of array elements is increasing, it will potentially decrease the performance.
You cannot reduce the number of times that comparison function is executed. However, you can reduce the work that the comparison has to do. This technique is called Schwartzian Transform.
To implement this, you follow these steps:
- First, extract the actual values into a temporary array using the map() method.
- Second, sort the temporary array with the elements that are already evaluated (or transformed).
- Third, walk the temporary array to get an array with the right order.
Here is the solution:
// temporary array holds objects with position
// and length of element
var lengths = rivers.map(function (e, i) {
return {index: i, value: e.length };
});// sorting the lengths array containing the lengths of
// river names
lengths.sort(function (a, b) {
return +(a.value > b.value) || +(a.value === b.value) - 1;
});
// copy element back to the array
var sortedRivers = lengths.map(function (e) {
return rivers[e.index];
});
console.log(sortedRivers);
Code language: JavaScript (javascript)
Output:
[ 'Nile', 'Congo', 'Amazon', 'Rio-Grande', 'Mississippi' ]
Code language: JSON / JSON with Comments (json)
In this tutorial, you have learned how to use the JavaScript Array sort()
method to sort arrays of strings, numbers, dates, and objects.