Метод toSorted()

JavaScriptJunior~2 хв читання

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() і дивуватися, чому компонент не перемальовується: посилання на масив лишилося тим самим.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.