Sorting an Array in JavaScript

May 30, 2019

JavaScript's built-in sort() function is often surprising to beginners. For example, suppose you sorted the below array:

[3, 20, 100].sort();

What would the output be? You might expect the array to stay the same, but the output will actually become:

[100, 20, 3];

That is because JavaScript converts array elements to strings and then sorts them according to JavaScript's ordering of strings.

Sorting an Array of Numbers

The sort() function takes one parameter, compareFunction(). The compareFunction() function takes two array elements a and b. It should return:

A negative number if a < b
A positive number if a > b
0 if a is neither greater than nor less than b.

To sort an array of numbers in forward order, you should use (a, b) => a - b as your compareFunction().

const arr = [3, 20, 100];

arr.sort((a, b) => a - b);
arr; // [3, 20, 100]

To sort an array of numbers in reverse order, you should use (a, b) => b - a instead.

const arr = [20, 3, 100];

arr.sort((a, b) => b - a);
arr; // [100, 20, 3]

If you're familiar with Java, you can think of compareFunction() as JavaScript's equivalent to compareTo().

Sorting an Array of Objects by Property

Suppose you instead wanted to sort an array of objects. For example, suppose you had an array of Star Trek: The Next Generation characters:

const characters = [
  { firstName: 'Jean-Luc', lastName: 'Picard', rank: 'Captain', age: 59 },
  { firstName: 'Will', lastName: 'Riker', rank: 'Commander', age: 29 },
  { firstName: 'Geordi', lastName: 'La Forge', rank: 'Lieutenant', age: 29 }
];

Here's how you would sort the characters array by lastName using JavaScript string comparison:

const characters = [
  { firstName: 'Jean-Luc', lastName: 'Picard', rank: 'Captain', age: 59 },
  { firstName: 'Will', lastName: 'Riker', rank: 'Commander', age: 29 },
  { firstName: 'Geordi', lastName: 'La Forge', rank: 'Lieutenant', age: 29 }
];

characters.sort((a, b) => {
  if (a === b) {
    return 0;
  }
  return a.lastName < b.lastName ? -1 : 1;
});

// La Forge, Picard, Riker
characters;

Here's how you would sort the characters array by age:

const characters = [
  { firstName: 'Jean-Luc', lastName: 'Picard', rank: 'Captain', age: 59 },
  { firstName: 'Will', lastName: 'Riker', rank: 'Commander', age: 29 },
  { firstName: 'Geordi', lastName: 'La Forge', rank: 'Lieutenant', age: 29 }
];

characters.sort((a, b) => a.age - b.age);

// Riker, La Forge, Picard
characters;

How about sorting by rank? Sorting by rank requires a custom ordering, because the JavaScript runtime doesn't know that 'Captain' is a higher rank than 'Lieutenant'. Here's how you would sort based on a custom ordering using indexOf().

const characters = [
  { firstName: 'Jean-Luc', lastName: 'Picard', rank: 'Captain', age: 59 },
  { firstName: 'Will', lastName: 'Riker', rank: 'Commander', age: 29 },
  { firstName: 'Geordi', lastName: 'La Forge', rank: 'Lieutenant', age: 29 }
];

const rankOrder = new Map([
  ['Captain', 1],
  ['Commander', 2],
  ['Lieutenant', 3]
]);

characters.sort((a, b) => {
  return rankOrder.get(a.rank) - rankOrder.get(b.rank);
});

// Picard, Riker, La Forge
characters;

Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

Sorting an Array in JavaScript

Sorting an Array of Numbers

Sorting an Array of Objects by Property

More Fundamentals Tutorials