Understanding sort() method in Javascript | with examples

Introduction

The sort() method is used to sort the elements of an array and return the sorted array. The way sort() method works is it converts each element to a string and then comparing their sequences of UTF-16 code values. By default, the sort() method sorts in ascending order.

let names = ["Peter", "John", "Abdul", "Morris"];

names.sort();

console.log(names); // ['Abdul', 'John', 'Morris', 'Peter']

Next, we will sort numbers.

let numbers = [7, 5, 1, 9, 1, 2, 3];

numbers.sort();

console.log(numbers); // [1, 1, 2, 3, 5, 7, 9]

Since the sort() method converts the elements to strings and compares the UTF-16 unit values, it can result in unaccepted order of elements.

let numbers = [9, 5, 10, 3, 1];

numbers.sort();

console.log(numbers); // [1, 10, 3, 5, 9]

As you can see, the value should be the last element in array numbers after the sorting. But the sort() method compares strings and arranges the value 10 in the second position.

Similarly, if you have array of strings with lower and upper cases sort will not work as expected

let names = ["John", "Andrew", "abdul", "Peter"];

names.sort();

console.log(names); // ['Andrew', 'John', 'Peter', 'abdul']

The string abdul is placed at the last position.

To solve this issue, we will make use of a compare function as the sort method accepts a callback function.

Sort numbers using sort() method

Before we can look at how to sort numbers, we need to first understand how the compare function works in the sort method.

The compare function takes two arguments. The way it works is it takes the first two elements of the array, compares them and moves through the rest of the elements passing two elements at a time.

The function needs to return a number less than 0 if the first number is less than the second number. This tells the method to sort the first number before the second number.

It should return greater than 0 if the first number is greater than the second. If both numbers are equal, the function should return 0. Following these criteria, we can sort numbers. For convenience, let us consider 0, -1 and 1.

ascending order

let numbers = [9, 5, 10, 3, 1];

numbers.sort(function (a, b) {
    if (a < b) {
        return -1;
    } else if (a > b) {
        return 1;
    } else {
        return 0;
    }
});

console.log(numbers); // [1, 3, 5, 9, 10]

Similarly,

​​let numbers = [9, -5, 1, 3, -2.7, 10, 3, 1];

numbers.sort(function (a, b) {
    return a - b;
});

console.log(numbers); // [-5, -2.7, 1, 1, 3, 3, 9, 10]

descending order

If you want the array to be sorted in descending order, simply return 1 if the first number is less than the second. -1 if the first number is greater than the second.

let numbers = [9, 5, 10, 3, 1];

numbers.sort(function (a, b) {
    if (a < b) {
        return 1;
    } else if (a > b) {
        return -1;
    } else {
        return 0;
    }
});

console.log(numbers); // [10, 9, 5, 3, 1]

Since the function requires us to return a positive, negative or value 0 we can simply rewrite the above function as follows:

let numbers = [9, 5, 10, 3, 1];

numbers.sort(function (a, b) {
    return a - b;
});

console.log(numbers); // [1, 3, 5, 9, 10]

When b is greater than a it will return a negative number. It will return a positive number when a is greater than b. It will return 0 in case both the numbers are equal.

For descending order,

let numbers = [9, 5, 10, 3, 1];

numbers.sort(function (a, b) {
    return b - a;
});

console.log(numbers); // [10, 9, 5, 3, 1]

Sort strings using the sort() method

The sort() method should ignore the case when sorting an array of strings. We will make use of the compare function that will take two arguments. To ignore the case, we will convert the elements to lowercase before comparing.

ascending order

let names = ["John", "Andrew", "abdul", "Peter"];

names.sort(function (a, b) {
    let str1 = a.toLowerCase(),
        str2 = b.toLowerCase();
    
    if (str1 < str2) {
        return -1;
    } else if (str1 > str2) {
        return 1;
    } else {
        return 0;
    }
});

console.log(names); // ['abdul', 'Andrew', 'John', 'Peter']

You can also rewrite the above function as follows:

let names = ["John", "Andrew", "abdul", "Peter"];

names.sort(function (a, b) {
    let str1 = a.toLowerCase(),
        str2 = b.toLowerCase();
    
    if (str1 < str2) return -1;
    if (str1 > str2) return 1;
    return 0;
});

console.log(names); // ['abdul', 'Andrew', 'John', 'Peter']

descending order

let names = ["John", "Andrew", "abdul", "Peter"];

names.sort(function (a, b) {
    let str1 = a.toLowerCase(),
        str2 = b.toLowerCase();
    
    if (str1 < str2) return 1;
    if (str1 > str2) return -1;
    return 0;
});

console.log(names); // ['Peter', 'John', 'Andrew', 'abdul']