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

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

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

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

Контент

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

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

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

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

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

**`toSorted()` це новий, немутуючий аналог методу `sort()` у JavaScript, доданий у стандарт ECMAScript 2023 (ES14).** Він дозволяє відсортувати масив, але при цьому не змінює вихідний масив, а повертає нову відсортовану копію.

## Теорія

### TL;DR
- `toSorted()` повертає **новий** відсортований масив, а оригінал лишає незмінним.
- `sort()`, навпаки, сортує на місці і повертає посилання на той самий масив.
- Метод приймає ту саму необов'язкову функцію порівняння, що й `sort()`.
- З'явився в ECMAScript 2023 разом з `toReversed()`, `toSpliced()` і `with()`.
- Без `compareFn` елементи порівнюються як рядки, тому для чисел компаратор обов'язковий.
- Головна сфера застосування це код без побічних ефектів: React, Redux, функціональний стиль.

### Швидкий приклад
```javascript
const numbers = [3, 1, 4, 2];
const sorted = numbers.toSorted((a, b) => a - b);

console.log(sorted);  // [1, 2, 3, 4]
console.log(numbers); // [3, 1, 4, 2], вихідний масив не змінився
```

На відміну від `sort()`, який змінює оригінал, `toSorted()` повертає новий масив з відсортованими елементами.

### Синтаксис і параметри
```javascript
const newArray = array.toSorted(compareFn);
```

| Параметр | Опис |
| --- | --- |
| `compareFn` | (необов'язковий) функція порівняння, така сама, як у `sort()`, наприклад `(a, b) => a - b` |

### Порівняння з sort()

| Метод | Чи змінює вихідний масив | Що повертає | Чи безпечний |
| --- | --- | --- | --- |
| `sort()` | Так | Той самий масив | Ні |
| `toSorted()` | Ні | Новий масив | Так |

Приклад, який показує різницю:

```javascript
const arr = [5, 2, 9];

const sorted1 = arr.sort();      // мутує
const sorted2 = arr.toSorted();  // не мутує

console.log(arr);     // [2, 5, 9], мутований
console.log(sorted1); // [2, 5, 9]
console.log(sorted2); // [2, 5, 9], новий незалежний масив
```

### Сортування чисел і власний компаратор
```javascript
const nums = [10, 2, 5, 1];
const asc = nums.toSorted((a, b) => a - b);
const desc = nums.toSorted((a, b) => b - a);

console.log(asc);  // [1, 2, 5, 10]
console.log(desc); // [10, 5, 2, 1]
console.log(nums); // [10, 2, 5, 1], не змінився
```

Один і той самий вихідний масив можна відсортувати кількома різними способами підряд, бо жоден виклик його не псує.

### Коли використовувати
- Коли важливо **зберегти вихідні дані**, наприклад у React, Redux чи функціональному коді.
- Коли потрібно безпечно відсортувати дані без побічних ефектів.
- Коли масив приходить із props, стану або кешу і мутувати його не можна.
- Коли з одного набору даних треба показати кілька різних порядків сортування.

### Пов'язані немутуючі методи (ES2023 і новіші)

| Новий метод | Старий аналог | Що робить | Чи мутує |
| --- | --- | --- | --- |
| `toReversed()` | `reverse()` | Перевертає порядок | Ні |
| `toSorted()` | `sort()` | Сортує | Ні |
| `toSpliced()` | `splice()` | Видаляє або вставляє елементи | Ні |
| `with()` | `arr[index] = value` | Замінює елемент за індексом | Ні |

Коротко про сам метод:

| Питання | Відповідь |
| --- | --- |
| Що робить | Створює відсортовану копію масиву |
| Чи змінює вихідний масив | Ні |
| Що повертає | Новий масив |
| Чи підтримує функцію порівняння | Так |
| Приклад | `[3, 1, 2].toSorted((a, b) => a - b)` дає `[1, 2, 3]` |

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

### Типові помилки
- Викликати `toSorted()` без компаратора для чисел. Тоді елементи порівнюються як рядки, і `[10, 2, 5, 1]` перетвориться на `[1, 10, 2, 5]`.
- Плутати його із `sort()` і випадково мутувати спільні дані. Мутує саме `sort()`.
- Не зберігати результат: `arr.toSorted()` сам по собі нічого не змінює, бо оригінал лишається тим самим.
- Вважати копію глибокою. Копія поверхнева: елементи-об'єкти в новому масиві це ті самі посилання.
- Розраховувати на метод у старому середовищі. Це ECMAScript 2023, тому в старих браузерах і Node.js потрібен polyfill або `[...arr].sort(...)`.
- Сортувати стан React через `sort()` і дивуватися, чому компонент не перемальовується: посилання на масив лишилося тим самим.

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

Для рев’юера

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

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