In this section, we will learn what the Array sort() method is and how to use it in JavaScript.
JavaScript Arrays sort() Method: How to sort an array in JavaScript?
The `sort()` method is used to reorder the elements of an array.
By default, the `sort()` method puts the items in an ascending order with the smallest value first and the largest value last. To do this, the `sort()` method calls the `String()` casting function on every item and then compares the strings to determine the correct order. This occurs even if all the items in an array are numbers.
Note: this method applies the changes to the original array.
Array sort() Syntax:
array.sort(compareFunction)
Array sort() Method Parameters:
The `sort()` method allows us to pass in a `comparison function` as its argument. Using this function, we put a set of instructions that at the end specifies which element should come before another in an array.
The comparison function accepts two arguments (two elements of the target array) and returns:
- A negative number: if the first argument is lower than the second argument;
- The value 0: if the arguments are equal;
- Or a positive number: if the first argument is greater than the second argument.
Array sort() Method Return Value:
The return value of the sort() method is a reference to the target array that was sorted.
Example: JavaScript array sorting
function comparison(v1, v2){
if(v1>v2){
console.log(`${v1} is bigger than ${v2}`);
return 1;
}else if( v1<v2){
console.log(`${v1} is less than ${v2}`);
return -1;
}else{
console.log(`${v1} is equal to ${v2}`);
}
}
const arr = [1,2,35,124,97,97,223];
arr.sort(comparison);
console.log(arr);
Output:
2 is bigger than 1 35 is bigger than 2 124 is bigger than 35 97 is less than 124 97 is bigger than 35 97 is less than 124 97 is bigger than 35 97 is less than 124 97 is equal to 97 223 is bigger than 97 223 is bigger than 124 [1, 2, 35, 97, 97, 124, 223]
The ordering in this example is in ascending base, but we can change the ordering to descending by simply changing the positive and negative values in the comparison function. This means if the first argument is greater than the second argument, the comparison function should return -1 and if the first argument is less than the second argument, the function should return +1.
Example: sorting an array in JavaScript
function comparison(v1, v2){
if(v1>v2){
console.log(`${v1} is bigger than ${v2}`);
return -1;
}else if( v1<v2){
console.log(`${v1} is less than ${v2}`);
return 1;
}else{
console.log(`${v1} is equal to ${v2}`);
}
}
const arr = [1,2,35,124,97,97,223];
arr.sort(comparison);
console.log(arr);
Output:
2 is bigger than 1 35 is bigger than 2 124 is bigger than 35 97 is less than 124 97 is bigger than 2 97 is bigger than 35 97 is less than 124 97 is bigger than 35 97 is equal to 97 223 is bigger than 35 223 is bigger than 97 223 is bigger than 124 [223, 124, 97, 97, 35, 2, 1]
Other than using multiple `if` statements in the comparison function, we could simply subtract the first argument from the second one. This way, if the first argument is greater than the second one, the result will be a positive value; If the first argument is less than the second one, the result becomes a negative value and finally, if they are equal; the result is 0.
Example: arrange the following array in ascending order
function comparison(v1, v2){
v1-v2;
}
const arr = [1,2,35,124,97,97,223];
arr.sort(comparison);
console.log(arr);
Output:
[1, 2, 35, 124, 97, 97, 223]
Example: JavaScript sort object by key
const obj1 = {
name: "John",
age: 1000
}
const obj2 = {
name: "Omid",
age: 29
}
const obj3 = {
name : "Ellen",
age :52
}
const arr = [obj1,obj2,obj3];
function sorting(val1, val2){
if (val1.name > val2.name){
return +1;
}else if (val1.name <val2.name){
return -1;
}else{
return 0;
}
}
arr.sort(sorting);
for (const obj of arr){
console.log(obj.name);
}
Output:
Ellen John Omid
Reference book:
Professional JavaScript for Web Developer, 4th Edition
Author: Matt Frisbie
