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

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

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

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

Контент

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

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

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

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

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

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

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

Для рев’юера

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

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