Erro ao modificar elemento de array em JavaScript

Vamos examinar o erro que ocorre ao modificar incorretamente um elemento de um array. Suponha que temos o seguinte array:

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

Suponha também que temos uma função que recebe um número como parâmetro e retorna o quadrado desse número:

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

Vamos usar um loop for-of para iterar sobre nosso array e aplicar nossa função a cada um de seus elementos:

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

É aqui que iniciantes costumam cometer um erro. A questão é que modificar a variável elem não leva à modificação do elemento no próprio array. Vamos verificar isso:

console.log(arr); // o array não mudou

O array não muda porque a variável elem armazena uma cópia do elemento, e não uma referência a ele. Modificar elem afeta a cópia, mas não o array em si.

Para resolver o problema, é necessário modificar os próprios elementos do array:

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

console.log(arr); // agora o array mudou