Blog Con X

Mastering Array Sorting Methods in JavaScript

January 16, 2025 | JavaScript / TypeScript

JavaScript provides several built-in methods for sorting and reversing arrays. Each method serves a unique purpose and has specific behaviors. In this post, we’ll cover all JavaScript array sorting and reversing methods, including:

  • sort
  • reverse
  • toSorted
  • toReversed

sort

The sort method sorts the elements of an array in place and returns the sorted array. By default, it sorts elements as strings in ascending order.

Example

const numbers = [3, 1, 4, 1, 5];
numbers.sort();
console.log(numbers);
// Output: [1, 1, 3, 4, 5] (incorrect for numbers without comparator)

numbers.sort((a, b) => a - b);
console.log(numbers);
// Output: [1, 1, 3, 4, 5] (correct for numbers)

reverse

The reverse method reverses the order of elements in an array in place.

Example

const numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers);
// Output: [5, 4, 3, 2, 1]

toSorted

The toSorted method creates a new array with the elements sorted, without mutating the original array. It is a part of modern JavaScript (introduced in ECMAScript 2023).

Example

const numbers = [3, 1, 4, 1, 5];
const sortedNumbers = numbers.toSorted((a, b) => a - b);
console.log(sortedNumbers);
// Output: [1, 1, 3, 4, 5]
console.log(numbers);
// Output: [3, 1, 4, 1, 5] (unchanged)

toReversed

The toReversed method creates a new array with the elements reversed, without mutating the original array. It is also part of modern JavaScript (introduced in ECMAScript 2023).

Example

const numbers = [1, 2, 3, 4, 5];
const reversedNumbers = numbers.toReversed();
console.log(reversedNumbers);
// Output: [5, 4, 3, 2, 1]
console.log(numbers);
// Output: [1, 2, 3, 4, 5] (unchanged)

Combining Methods

These methods can be combined to perform complex sorting and reversing tasks efficiently.

Example

const numbers = [3, 1, 4, 1, 5];
const sortedReversedNumbers = numbers.toSorted((a, b) => a - b).toReversed();
console.log(sortedReversedNumbers);
// Output: [5, 4, 3, 1, 1]

Choosing the Right Method

Use sort:

  • When you need to sort an array of strings or numbers (with a custom comparator for numbers).

Use reverse:

  • When you need to quickly reverse the order of an array of elements.

Use toSorted:

  • When you need a new array with sorted elements without mutating the original array.

Use toReversed:

  • When you need a new array with reversed elements without mutating the original array.