Метод reverse() у масивах

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

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

Теорія

TL;DR

reverse() перевертає порядок елементів масиву на зворотний.
Працює «на місці»: змінює саме той масив, на якому викликаний.
Повертає той самий масив (не копію), тому зручно писати ланцюжки.
Безпечний варіант: [...arr].reverse(), arr.slice().reverse() або arr.toReversed().
Рядок не має reverse(), для нього роблять str.split('').reverse().join('').
Складність, O(n): рушій просто міняє місцями пари елементів з початку і кінця.

Швидкий приклад

javascript

const arr = [1, 2, 3, 4];
arr.reverse();

console.log(arr); // [4, 3, 2, 1]

Три факти, які тут важливі:

елементи переставляються на місці, у вихідному масиві;
метод мутує масив;
повертає сам змінений масив, що зручно для чейнінгу.

Мутація і повернене значення

Найчастіша пастка: люди пишуть const reversed = arr.reverse() і думають, що отримали новий масив. Насправді обидві змінні вказують на один об'єкт.

javascript

const letters = ["a", "b", "c"];
const reversed = letters.reverse();

console.log(reversed); // ["c", "b", "a"]
console.log(letters);  // ["c", "b", "a"], the very same object

letters і reversed, це один і той самий масив, бо reverse() повертає посилання на вихідний об'єкт. Перевірити легко: reversed === letters дає true.

Зведення поведінки:

Властивість	Опис
Міняє порядок елементів	Так
Змінює вихідний масив	Так
Повертає	Той самий масив (уже перевернутий)
Тип поверненого значення	`Array`

Як перевернути без зміни оригіналу

Якщо потрібно перевернути без зміни вихідного масиву, спершу зробіть копію:

javascript

const arr = [1, 2, 3];
const reversed = [...arr].reverse();

console.log(arr);      // [1, 2, 3]
console.log(reversed); // [3, 2, 1]

Рівнозначні способи скопіювати перед переворотом:

javascript

const a = arr.slice().reverse();   // classic copy
const b = Array.from(arr).reverse();
const c = arr.toReversed();        // ES2023, no copy needed by hand

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

javascript

const users = [{ name: 'Alice' }, { name: 'Bob' }];
const flipped = [...users].reverse();

flipped[0].name = 'Maria';
console.log(users[1].name); // Maria, the objects are shared

Рядки та інші структури

Рядки не мають методу reverse(), бо вони незмінні. Але їх можна перевернути через масив символів:

javascript

const str = "hello";
const reversed = str.split("").reverse().join("");

console.log(reversed); // "olleh"

Для інших структур схема така сама, привести до масиву і перевернути:

javascript

const set = new Set([1, 2, 3]);
const back = [...set].reverse();   // [3, 2, 1]

const list = document.querySelectorAll('li');
const lastFirst = [...list].reverse(); // NodeList has no reverse()

Типізовані масиви (Int32Array і подібні) власний reverse() мають, і він теж мутує буфер.

Коротко про метод

Що робить	Міняє порядок елементів на зворотний
Мутує масив	Так
Повертає	Змінений масив (те саме посилання)
Безпечна версія	`[...arr].reverse()` або `arr.toReversed()`
Приклад	`[1,2,3].reverse()` дає `[3,2,1]`

Підсумок: reverse() переставляє елементи масиву у зворотному порядку, змінюючи при цьому вихідний масив.

Типові помилки

Вважати reverse() немутуючим. Він не схожий на map чи filter: вихідний масив після виклику вже перевернутий. Якщо масив прийшов ззовні (props, стан, аргумент функції), ви мовчки зіпсуєте чужі дані.
Перевертати стан у React напряму. state.items.reverse() мутує той самий об'єкт, тож посилання не змінюється і перерендеру не буде. Треба [...state.items].reverse() або state.items.toReversed().
Думати, що const захищає. const arr = [1,2,3]; arr.reverse(); цілком законно: const забороняє перепризначення змінної, а не зміну вмісту масиву.
Плутати reverse() і sort(). reverse() просто перевертає наявний порядок, він нічого не сортує. Щоб отримати спадання, сортуйте з компаратором: arr.sort((a, b) => b - a).
Перевертати рядок з емодзі чи іншими сурогатними парами через split(''). Такий поділ ріже символ навпіл і ламає текст; безпечніше [...str].reverse().join(''), що ділить рядок за code points.
Розраховувати на порядок у розріджених масивах. Порожні «дірки» в масиві теж переставляються і лишаються дірками, а не перетворюються на undefined.

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

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

Premium

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