
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.

```js
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.

```js
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）](https://codepen.io/chocolat5/pen/OJoBBYK)

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

```js
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

```js
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` .

```js
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` 🎉

```js
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"}
]
*/
```

[Demo & Source（CodePen）](https://codepen.io/chocolat5/pen/OJoBBYK)

## References

- Array.prototype.sort() - JavaScript | MDN [https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)（2023-4-09参照）
- String.prototype.indexOf() - JavaScript | MDN [https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf)（2023-4-09参照）


Sorting Arrays in Any Order Using sort()

Tags