Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Метод sort() у масиві». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**`sort()` сортує елементи масиву на місці: він змінює вихідний масив, на відміну від більшості інших методів перебору, і повертає посилання на нього ж.** Метод працює і з числами, і з рядками, але коректний порядок для чисел можливий лише тоді, коли ви передасте функцію порівняння.

## Теорія

### TL;DR
- `sort()` сортує на місці і повертає той самий масив, а не новий.
- Без колбека елементи приводяться до рядків і порівнюються за кодами Unicode.
- `(a, b) => a - b` дає зростання, `(a, b) => b - a` дає спадання.
- Для рядків із урахуванням мови та регістру беріть `localeCompare`.
- Щоб не зіпсувати оригінал, сортуйте копію: `[...arr].sort(...)`.
- Починаючи з ES2019 сортування стабільне: рівні елементи зберігають початковий порядок.

### Швидкий приклад
```javascript
const numbers = [1, 10, 2, 5];

numbers.sort();
console.log(numbers); // [1, 10, 2, 5], порівняння як рядків

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

### Синтаксис і функція порівняння
```javascript
array.sort(compareFunction);
```

`compareFunction` це колбек такого вигляду:

```javascript
(a, b) => {
  // повернути від'ємне значення, якщо a має бути раніше за b
  // повернути додатне значення, якщо a має бути пізніше за b
  // повернути 0, якщо порядок не важливий
}
```

За замовчуванням, без колбека, `sort()` сортує елементи як рядки за кодами Unicode, навіть якщо це числа. Саме тому числа без функції порівняння впорядковуються не за величиною, а посимвольно.

```javascript
const fruits = ['banana', 'apple', 'cherry'];

fruits.sort();

console.log(fruits); // ['apple', 'banana', 'cherry']
```

### Сортування чисел, об'єктів і рядків
**Числа за зростанням і спаданням.** Функція `(a, b) => a - b` дає порядок за зростанням, `(a, b) => b - a` за спаданням.

```javascript
const prices = [100, 500, 200, 50];

prices.sort((a, b) => b - a);

console.log(prices); // [500, 200, 100, 50]
```

**Сортування за властивістю об'єкта.** Найчастіший сценарій на практиці, коли масив об'єктів впорядковують за числовим полем.

```javascript
const users = [
  { name: 'Tim', age: 25 },
  { name: 'Alex', age: 30 },
  { name: 'John', age: 20 }
];

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

console.log(users);
// [
//   { name: 'John', age: 20 },
//   { name: 'Tim', age: 25 },
//   { name: 'Alex', age: 30 }
// ]
```

**Рядки за абеткою, без урахування регістру.** `localeCompare` це правильний спосіб порівнювати рядки з урахуванням мови та регістру.

```javascript
const names = ['tim', 'Alex', 'john'];

names.sort((a, b) => a.localeCompare(b, 'en', { sensitivity: 'base' }));

console.log(names); // ['Alex', 'john', 'tim']
```

**Сортування за кількома критеріями.** Якщо вік однаковий, порядок визначає ім'я.

```javascript
const users = [
  { name: 'Tim', age: 25 },
  { name: 'Alex', age: 25 },
  { name: 'John', age: 20 }
];

users.sort((a, b) => {
  if (a.age !== b.age) return a.age - b.age;
  return a.name.localeCompare(b.name);
});

console.log(users);
// [
//   { name: 'John', age: 20 },
//   { name: 'Alex', age: 25 },
//   { name: 'Tim', age: 25 }
// ]
```

### Чому краще писати [...arr].sort()
`sort()` змінює вихідний масив і повертає посилання на нього, а не на новий масив.

```javascript
const arr = [3, 1, 2];
const sorted = arr.sort();

console.log(sorted); // [1, 2, 3]
console.log(arr);    // [1, 2, 3], це той самий масив, він змінений
console.log(arr === sorted); // true
```

Це небезпечно, коли масив приходить із пропсів, зі стану застосунку чи з кешу: сортування «для показу» непомітно перебудовує дані, на які покладається інший код, а React чи Vue можуть не помітити зміни, бо посилання лишилося тим самим. Тому перед сортуванням роблять копію.

```javascript
const sortedCopy = [...arr].sort((a, b) => a - b);
```

Копія коштує один прохід по масиву, а натомість ви отримуєте чисту функцію без побічних ефектів. У сучасних середовищах ту саму ідею виражає вбудований метод `toSorted()`, який одразу повертає новий масив і не чіпає оригінал.

### Коли брати sort(), а коли інші методи

| Мета | Чи підходить `sort()` |
| --- | --- |
| Відсортувати числа або рядки | Так |
| Відсортувати об'єкти за полем | Так |
| Отримати новий відсортований масив без зміни оригіналу | Так, але лише через копію `[...arr]` |
| Перевірити умову | Ні |
| Трансформувати дані | Ні |

Порівняння з сусідніми методами:

| Метод | Повертає новий масив | Змінює вихідний | Призначення |
| --- | --- | --- | --- |
| `map()` | так | ні | перетворює елементи |
| `filter()` | так | ні | відбирає елементи |
| `find()` | ні, повертає елемент | ні | знаходить перший елемент |
| `reduce()` | ні, повертає одне значення | ні | зводить до одного результату |
| `sort()` | ні, повертає той самий масив | так | сортує елементи |

Формула для запам'ятовування: `arr.sort((a, b) => a - b)` це зростання, `arr.sort((a, b) => b - a)` це спадання.

### Типові помилки
**1. Сортувати числа без колбека.** Елементи порівнюються як рядки, тож `10` опиняється перед `2`.

```javascript
[10, 2, 1].sort(); // [1, 10, 2], порівняння як рядків
```

Правильно:

```javascript
[10, 2, 1].sort((a, b) => a - b); // [1, 2, 10]
```

**2. Не помітити мутацію вихідного масиву.**

```javascript
const a = [3, 1, 2];
const b = a.sort();
console.log(a === b); // true, це той самий об'єкт
```

**3. Розраховувати на стабільність у старих рушіях.** До ES2019 сортування могло бути нестабільним, і елементи з однаковим ключем могли міняти взаємний порядок. У сучасних версіях ECMAScript `sort()` стабільний.

**4. Повертати з колбека булеве значення.** `(a, b) => a > b` повертає `true` або `false`, а не від'ємне число, нуль чи додатне, тому порядок виходить непередбачуваним. Завжди повертайте число.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати920 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.