Sorting Arrays in Any Order Using sort()

Sorting arrays in any order using sort() is a method of arranging an array in a specific order that is neither ascending nor descending.

The sort() method is a mutable method that rearranges the elements of an array. By default, it sorts the elements in ascending order.

Basic Usage

By default, the sort() method sorts an array in ascending order.

const cities = ["Tokyo", "Osaka", "Kyoto", "Nagoya"];

cities.sort();

console.log(cities); // Kyoto, Nagoya, Osaka, Tokyo

Additionally, the sort() method sorts values as strings, so a comparison function is needed to get the correct results when sorting numerical values.

const numbers = [58, 100, 1, 5, 32, 10];

/** 文字列として並び替え */
numbers.sort();
console.log(numbers); // 1, 10, 100, 32, 5, 58

/** 比較関数 */
numbers.sort((a, b) => a - b);
console.log(numbers); // 1, 5, 10, 32, 58, 100

Sorting in Any Order

Sorting is done using a comparison function. Numerical comparisons are a straightforward process of comparing the values of the numbers in the array. However, when sorting in any order, use the indexOf() method to determine the position (index number) of the value of each element in the array that serves as the basis for the sorting. Sorting is done by comparing the index numbers.

Demo & Source（CodePen）

Here's an example of data to be sorted in any order based on the value of genre.

const DATA = [
  { name: "Interstellar", genre: "Sci-fi" },
  { name: "Tenet", genre: "Action" },
  { name: "Dunkirk", genre: "Drama" },
  { name: "Inception", genre: "Adventure" },
  { name: "The Dark Knight", genre: "Action" },
  { name: "Memento", genre: "Mystery" },
];

1. Create an arbitrary array for sorting

const order = ["Action", "Adventure",  "Drama", "Mystery", "Sci-fi"];

2. Execute the sorting

Comparison is done using the genre property of each element in the DATA array. The values of the genre of the elements being compared are obtained using x.genre and y.genre .

Then, order.indexOf(x.genre) and order.indexOf(y.genre) are used to obtain the index numbers of the obtained values in order .

DATA.sort((x, y)　=> {
  return order.indexOf(x.genre) - order.indexOf(y.genre);
});

For example, the genre of the first element of the array, { name: "Interstellar", genre: "Sci-fi" }, is Sci-fi. The index number of Sci-fi in order is 4 . For the next element, { name: "Tenet", genre: "Action" }, the index number obtained is 0 .

The comparison between Interstellar and Tenet is 4 - 0, which results in a positive (+) value. Thus, Tenet (y) is sorted before Interstellar (x). If the comparison result is negative (-), x is sorted before y. If the result is 0, the original order is maintained.

This comparison is done for all elements in the array, and the sorted array is returned.

The array's elements have been sorted in the order specified by order 🎉

console.log(DATA);
/*
[
  {name: "Tenet", genre: "Action"},
  {name: "The Dark Knight", genre: "Action"},
  {name: "Inception", genre: "Adventure"},
  {name: "Dunkirk", genre: "Drama"},
  {name: "Memento", genre: "Mystery"},
  {name: "Interstellar", genre: "Sci-fi"}
]
*/