Overview

One of the only array manipulation methods that always threw me was the sort() method.

I always found its syntax pretty confusing, given elements in the array shift left or right based on results from a calculation being positive or negative (or zero).

It might just be me, but I hope this post clears up any shared confusion on the matter through some simple and concise examples that you can always come back to use as a reference point if you memory is as short-lived as mine.

Important Sidenote:
It's important to note that Sort() mutates the original array.

The Basics

Sort() alone sorts arrays alphabetically, and numerical by default.

Things to note however is that it takes the first digit of numbers for the sort, paying no attention to the second digit unless it has to. Strings are also sorted by their first character.

const teams = ['Arsenal', 'Manchester Utd', 'Liverpool', 'Chelsea'];

teams.sort(); 
// ['Arsenal', 'Chelsea', 'Liverpool', 'Manchester Utd']
teams.reverse();
// ['Manchester Utd', 'Liverpool', 'Chelsea', 'Arsenal']


const numbers = [3, 23, 12];

numbers.sort(); // --> 12, 23, 3
numbers.reverse(); // --> 3, 23, 12

Some further caveats are that Strings are sorted with capital letters taking the highest sorting priority after numbers. This can be seen in mixed arrays such as the following:

const numbersAndStrings = ['Arsenal', 12, 'Chelsea', 10, 'arsenal', 32, 1, 'chelsea'];

numbersAndStrings.sort();
// --> [ 1, 10, 12, 32, 'Arsenal', 'Chelsea', 'arsenal', 'chelsea' ]

So, the basic rules are:

• numbers first (digit by by digit)
• capital letters next (char by char)
• lowercase letters last (char by char)

Although these rules are clear, they don't really add up for real world use cases, because sorting digit by digit means 100 will be sorted before 25...

What if we want a truly descending sort?

The Compare Function

The answer to above's problem is passing in a function to the sort() method. This is generally called a Compare Function when it comes to the sort() method.

How does it work?

You pass in a function, with two arguments (a and b), followed by a calculation. The result of the that calculation must be a positive or negative value, or zero.

• If the result is negative, a is sorted before b.
• If the result is positive, b is sorted before a.
• If the result is 0, nothing changes.

What does this look like?

Take the below example:

const numbersWithCompareAscending = [3, 23, 12];

numbersWithCompareAscending.sort((a, b) => {
 return a - b;
});

console.log(numbersWithCompareAscending);
// --> 3, 12, 23

sort() takes in a function with arguments 'a' and 'b', and calculates 'a - b'.

So it follows these steps:

• step 1: a (which is 3) subtract b (which is 23) = -20 (negative result so a(3) stays on the left.
• step 2: a(which is 23 now) subtract b (which is 12) = 11 (positive result so a(23) swaps positions with b(12).
• step 3: our sorted array is now [3, 12, 23]

You can achieve a reverse (descending) sorting order simply by returning b - a instead of a - b.