JS Sorting Arrays

In this tutorial, you will learn how to sort array elements in JavaScript.

Sorting an Array

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,Papaya

Try with example

Reversing an Array

The 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

Try with example

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. 

Sorting Numeric Arrays

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,75

Try with example

As 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,100

Try with example

Array elements are sorted according to the return value when compare function is specified. For instance, when comparing a and b:

• ‘a’ comes first if the compare function returns a value less than ‘0’, 
• ‘b’ comes first if the compare function returns a value greater than ‘0’,
• ‘a’ and ‘b’ remain unchanged with respect to each other, but sorted with respect to all other elements if the compare function returns ‘0’.

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.

Finding the Maximum and Minimum Value in an Array

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

Try with example

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).

Sorting an Array of Objects

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);

Try with example