Методи масивів з мутацією та без мутації в JavaScript

Методи масивів у JavaScript

JavaScript надає потужний набір методів для роботи з масивами. Вони всі діляться на мутуючі (модифікують оригінальний масив) та немутуючі (повертають новий масив або значення без зміни оригіналу).

Мутуючі методи масивів

Ці методи модифікують сам масив:

Метод	Опис
`push()`	Додає елемент в кінець
`pop()`	Видаляє останній елемент
`shift()`	Видаляє перший елемент
`unshift()`	Додає елемент на початок
`splice()`	Видаляє, замінює або вставляє елементи за індексом
`sort()`	Сортує масив (за замовчуванням як рядки, можна передати функцію порівняння)
`reverse()`	Змінює порядок елементів на протилежний
`fill()`	Заповнює масив конкретним значенням
`copyWithin()`	Копіює елементи всередині масиву

Приклад splice()

const arr = [1, 2, 3, 4];
arr.splice(1, 2); // Видаляє 2 елементи з індексу 1
console.log(arr); // [1, 4]

Немутуючі методи масивів

Ці методи не модифікують оригінальний масив, а повертають нове значення:

Метод	Опис
`slice()`	Повертає підмасив
`concat()`	Об'єднує масиви
`map()`	Створює новий масив, застосовуючи функцію до кожного елемента
`filter()`	Фільтрує елементи за умовою
`find()`	Повертає перший елемент, що відповідає умові
`findIndex()`	Повертає індекс першого відповідного елемента
`every()`	Перевіряє, чи всі елементи задовольняють умову
`some()`	Перевіряє, чи хоча б один елемент задовольняє умову
`reduce()`	Перетворює масив в одне значення
`includes()`	Перевіряє наявність значення
`indexOf()`	Повертає індекс першого збігу
`lastIndexOf()`	Повертає індекс останнього збігу
`flat()`	"Вирівнює" вкладені масиви
`join()`	Перетворює масив в рядок
`toSorted()`	Новий спосіб сортування без мутації масиву (ES2023)
`toReversed()`	Повертає новий масив з перевернутим порядком елементів без мутації оригіналу (ES2023)
`toSpliced()`	Повертає новий масив з видаленими/заміненими елементами без мутації оригіналу (ES2023)

Приклад map()

const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
console.log(doubled); // [2, 4, 6]

Важливо:

Методи sort(), reverse(), splice() модифікують оригінальний масив. Якщо ви хочете зберегти оригінал, використовуйте немутуючі альтернативи з ES2023: toSorted(), toReversed(), toSpliced(), або спочатку зробіть копію: const sorted = [...array].sort()

Висновок

Використовуйте мутуючі методи свідомо, коли модифікація масиву є прийнятною.
Віддавайте перевагу немутуючим методам, коли потрібно зберегти оригінал.

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

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

Premium

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

Дочитали статтю?

Практика завдань

Методи масивів з мутацією та без мутації в JavaScript

#Методи масивів у JavaScript

#Мутуючі методи масивів

#Приклад splice()

#Немутуючі методи масивів

#Приклад map()

#Висновок