Как ведут себя массивы и объекты при изменении внутри функций?

Передача по ссылке и по значению

В JavaScript примитивные типы (числа, строки, булевы значения) передаются по значению. Это значит, что при передаче в функцию создается копия значения, и изменения внутри функции не влияют на оригинальную переменную. Объекты и массивы, напротив, передаются по ссылке — функция получает ссылку на тот же объект в памяти, поэтому мутации внутри функции изменяют оригинал.

Пример с объектом

function updateUser(user) {
  user.name = 'Alice';
}
const person = { name: 'Bob' };
updateUser(person);
console.log(person.name); // 'Alice'

В этом примере объект person изменяется внутри функции, так как передается ссылка на него.

Пример с массивом

function addItem(arr) {
  arr.push(4);
}
const numbers = [1, 2, 3];
addItem(numbers);
console.log(numbers); // [1, 2, 3, 4]

Массив numbers также мутируется.

Как избежать мутаций

Чтобы не изменять оригинал, можно создать копию внутри функции. Для объектов используйте spread-оператор или Object.assign, для массивов — slice() или spread:

function safeUpdateUser(user) {
  return { ...user, name: 'Alice' };
}
const person = { name: 'Bob' };
const updated = safeUpdateUser(person);
console.log(person.name); // 'Bob'
console.log(updated.name); // 'Alice'

Такой подход называется иммутабельностью и часто применяется в React и Redux для предсказуемости состояния.

Вывод

Понимание передачи по ссылке важно для избежания неожиданных побочных эффектов. Используйте иммутабельные методы при работе с состоянием в приложениях, особенно в функциональных компонентах и управлении состоянием.