> Какие методы массива мутируют его в JavaScript (JavaScript)

Короткий ответ

Мутирующие методы массива изменяют исходный массив на месте. Основные: push, pop, shift, unshift, splice, sort, reverse, fill, copyWithin. Также delete (не метод, но мутирует) и методы, изменяющие длину. В современном JavaScript рекомендуется избегать мутаций в пользу иммутабельных подходов, используя методы, возвращающие новый массив: map, filter, slice, concat, spread-оператор.

Подробное объяснение

Мутирующие методы массива - это методы, которые изменяют сам массив, а не возвращают новый. Они работают с массивом по ссылке, поэтому все переменные, ссылающиеся на этот массив, увидят изменения. Это может приводить к неожиданным побочным эффектам, особенно в функциональном программировании и React-приложениях.

Полный список мутирующих методов:

• push() - добавляет элемент(ы) в конец, возвращает новую длину
• pop() - удаляет последний элемент, возвращает его
• shift() - удаляет первый элемент, возвращает его
• unshift() - добавляет элемент(ы) в начало, возвращает новую длину
• splice() - универсальный: удаляет, добавляет, заменяет элементы
• sort() - сортирует на месте, возвращает ссылку на массив
• reverse() - переворачивает порядок, возвращает ссылку
• fill() - заполняет все или часть элементов статическим значением
• copyWithin() - копирует часть массива в другую позицию в том же массиве

Важно: sort() и reverse() возвращают ссылку на тот же массив, что может создать иллюзию иммутабельности. Например, const sorted = arr.sort() - sorted и arr указывают на один объект.

Немутирующие альтернативы:

• toSorted(), toReversed(), toSpliced() - новые методы ES2023, возвращают копию
• slice() вместо splice() для извлечения
• spread + push для добавления: [...arr, newItem]
• filter/map для удаления/трансформации

На практике

В продакшн-коде мутации часто становятся источником багов, особенно при работе с состоянием в React, Redux или Vuex. Например, если вы мутируете массив, переданный в пропсы, это может нарушить принцип однонаправленного потока данных.

Паттерны для избегания мутаций:

• Используйте const для массивов (не предотвращает мутации, но сигнализирует о намерении)
• Создавайте копии через [...arr] или Array.from() перед мутацией
• В функциональных цепочках отдавайте предпочтение map, filter, reduce
• Для сортировки без мутации: [...arr].sort()

Исключения, где мутации оправданы:

• Высокопроизводительные операции с большими массивами (тысячи элементов)
• Работа с WebGL или Canvas буферами
• Легаси-код, где рефакторинг слишком затратен

Пример кода

JAVASCRIPT
// Мутирующие методы
const arr = [3, 1, 2];
arr.push(4);        // [3, 1, 2, 4]
arr.sort();         // [1, 2, 3, 4] - исходный массив изменён
arr.reverse();      // [4, 3, 2, 1]

// Опасный паттерн
function addItem(items, newItem) {
  items.push(newItem); // мутация входного массива!
  return items;
}

const original = [1, 2];
const result = addItem(original, 3);
console.log(original); // [1, 2, 3] - неожиданно

// Иммутабельный подход
function addItemSafe(items, newItem) {
  return [...items, newItem];
}

const original2 = [1, 2];
const result2 = addItemSafe(original2, 3);
console.log(original2); // [1, 2] - без изменений

// Современные иммутабельные методы (ES2023)
const nums = [3, 1, 2];
const sorted = nums.toSorted(); // [1, 2, 3], nums не изменён
const reversed = nums.toReversed(); // [2, 1, 3]

Как отвечать на собеседовании

Начните с чёткого определения мутации и перечислите основные методы. Затем покажите понимание последствий: побочные эффекты, проблемы с реактивностью, баги в асинхронном коде. Упомяните разницу между возвратом ссылки и возвратом нового массива. Продемонстрируйте знание современных альтернатив (ES2023 методы) и иммутабельных паттернов. Если спросят про производительность, объясните trade-off: мутации быстрее, но опаснее для поддерживаемости.

Что проверяет интервьюер

• Глубокое понимание ссылочной модели JavaScript
• Умение预见ить побочные эффекты в коде
• Знание современных практик (иммутабельность, функциональное программирование)
• Осведомлённость о новых возможностях языка (ES2023)
• Способность выбирать правильный инструмент под задачу

Типичные ошибки

• Утверждение, что sort() возвращает новый массив
• Использование delete для удаления элемента (оставляет дырку, не меняет длину)
• Путаница между slice() (не мутирует) и splice() (мутирует)
• Предположение, что const защищает от мутаций
• Игнорирование того, что методы вроде forEach не мутируют сами, но коллбэк может
• Забывание, что fill() и copyWithin() мутируют