Codectionary / Developer documentation / JavaScript

sort() and reverse()

sort() orders the elements of an array in place. Without a comparator function, it converts elements to strings and sorts lexicographically - which produces surprising results for numbers. A comparator function gives full control over the ordering. reverse() simply flips the current order of the array in place.

Syntax

arr.sort((a, b) => a - b)
arr.reverse()

Examples

The Default sort() Gotcha

Sorting numbers without a comparator produces unexpected results.

const numbers = [10, 1, 21, 2];

console.log(numbers.sort());
// [1, 10, 2, 21] - sorted as strings, not numbers!

console.log(numbers.sort((a, b) => a - b));
// [1, 2, 10, 21] - correct numeric ascending order

Sorting with a Comparator

Using a comparator function for correct numeric and custom ordering.

const numbers = [5, 2, 8, 1, 9];

numbers.sort((a, b) => a - b); // ascending
console.log(numbers); // [1, 2, 5, 8, 9]

numbers.sort((a, b) => b - a); // descending
console.log(numbers); // [9, 8, 5, 2, 1]

Sorting Objects and Reversing

Sorting an array of objects by a property, and reversing an array.

const people = [
  { name: "Charlie", age: 30 },
  { name: "Alice", age: 25 },
  { name: "Bob", age: 35 }
];

people.sort((a, b) => a.age - b.age);
console.log(people.map(p => p.name)); // ["Alice", "Charlie", "Bob"]

const letters = ["a", "b", "c"];
letters.reverse();
console.log(letters); // ["c", "b", "a"]

Best practices

  • Always provide a comparator function when sorting numbers - the default string-based sort produces incorrect ordering
  • Remember sort() and reverse() both mutate the original array in place - copy it first with [...arr].sort() if you need to preserve the original
  • For sorting objects, subtract the numeric property (a.value - b.value) for ascending order, or swap the order for descending
  • Use localeCompare() as the comparator when sorting strings that may contain accented characters, for correct alphabetical ordering

Runtime & versions

Browsers and JavaScript runtimes. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

ECMAScript specification

Specifications & further reading