In this tutorial, you will learn how to sort array elements in JavaScript.
When working with an array sorting is a common task. Sorting can be useful to display the city or county names in alphabetical order.
In JavaScript, the array object has a built-in method sort() for sorting array elements in alphabetical order. The following example demonstrates how it works:
var fruits = ["Banana", "Orange", "Apple", "Papaya", "Mango"];
var sorted = fruits.sort();
alert(fruits); // Outputs: Apple,Banana,Mango,Orange,Papaya
alert(sorted); // Outputs: Apple,Banana,Mango,Orange,PapayaThe reverse() method is used to reverse the order of the elements of an array.
This method reverses an array in a manner that the first array element becomes the last, and the last array element becomes the first. Here's an example:
var counts = ["one", "two", "three", "four", "five"];
var reversed = counts.reverse();
alert(counts); // Outputs: five,four,three,two,one
alert(reversed); // Output: five,four,three,two,one
Note: As seen in the above examples the original array was modified by the sort() method, and the reserve() method return a reference to the same array.
The unexpected result may be produced while using the sort() method when it is applied to the numeric arrays (i.e. arrays containing numeric values). For instance:
var numbers = [5, 20, 10, 75, 50, 100];
numbers.sort(); // Sorts numbers array
alert(numbers); // Outputs: 10,100,20,5,50,75As you can see, the result is quite different from what we expected. This occurred because the sort() method sorts the numeric array elements by converting them to strings (i.e. 20 becomes "20", 100 becomes "100", etc.), and since the first character of string "20" (i.e. "2") appears after the first character of the string "100" (i.e. "1"), that's why the value 20 is sorted after the 100.
you can pass a compare function like this to fix this sorting problem with a numeric array. This time we've got the correct result as you can see. Let's check how it works.
var numbers = [5, 20, 10, 75, 50, 100];
// Sorting an array using compare function
numbers.sort(function(a, b) {
return a - b;
});
alert(numbers); // Outputs: 5,10,20,50,75,100Array elements are sorted according to the return value when compare function is specified. For instance, when comparing a and b:
Since 5 - 20 = -15 which is less than ‘0’, therefore ‘5’ comes first.
Similarly, 20 - 10 = 10 which is greater than ‘0’, so ‘10’ comes before ‘20’,
Same as 20 - 75 = -55 which is less than ‘0’, also, 20 comes before 75, likewise, 50 comes before 75, and so on.
The apply() method can be used in combination with the Math.max() and Math.min() to find the maximum and minimum value inside an array, like this:
var numbers = [3, -7, 10, 8, 15, 2];
// Defining function to find maximum value
function findMax(array) {
return Math.max.apply(null, array);
}
// Defining function to find minimum value
function findMin(array) {
return Math.min.apply(null, array);
}
alert(findMax(numbers)); // Outputs: 15
alert(findMin(numbers)); // Outputs: -7
So, in the example above, the resulting statement Math.max.apply(null, numbers) is equivalent to the Math.max(3, -7, 10, 8, 15, 2).
You can also use the sort() method for sorting object arrays using the compare function.
The following example will show you how to sort an array of objects by property values:
var persons = [
{ name: "Harry", age: 14 },
{ name: "Ethan", age: 30 },
{ name: "Peter", age: 21 },
{ name: "Clark", age: 42 },
{ name: "Alice", age: 16 }
];
// Sort by age
persons.sort(function (a, b) {
return a.age - b.age;
});
console.log(persons);
// Sort by name
persons.sort(function(a, b) {
var x = a.name.toLowerCase(); // ignore upper and lowercase
var y = b.name.toLowerCase(); // ignore upper and lowercase
if(x < y) {
return -1;
}
if(x > y) {
return 1;
}
// names must be equal
return 0;
});
console.log(persons);