Ошибка изменения элемента массива в JavaScript

Давайте рассмотрим ошибку, возникающую при неправильном изменении элемента массива. Пусть у нас дан вот такой массив:

javascriptlet arr = [1, 2, 3, 4, 5];

Пусть у нас также есть функция, которая параметром принимает число и возвращает квадрат этого числа:

javascriptfunction func(num) {
  return num ** 2;
}

Давайте с помощью цикла for-of переберем наш массив и к каждому из его элементов применим нашу функцию:

javascriptfor (let elem of arr) {
  elem = func(elem);
}

В этом месте начинающие часто допускают ошибку. Дело в том, что изменение переменной elem не приводит к изменению элемента в самом массиве. Убедимся в этом:

javascriptconsole.log(arr); // массив не изменился

Массив не изменяется из-за того, что в переменной elem хранится копия элемента, а не ссылка на него. Изменение elem влияет на копию, но не на сам массив.

Для решения проблемы нужно изменять именно элементы массива:

javascriptfor (let i = 0; i < arr.length; i++) {
  arr[i] = func(arr[i]);
}

console.log(arr); // теперь массив изменился