JavaScript 배열 요소 변경 오류

배열 요소를 잘못 변경할 때 발생하는 오류를 살펴보겠습니다. 다음과 같은 배열이 있다고 가정해 봅시다:

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

또한, 매개변수로 숫자를 받아 그 숫자의 제곱을 반환하는 함수가 있다고 가정해 봅시다:

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

for-of 루프를 사용하여 배열을 순회하고 각 요소에 이 함수를 적용해 보겠습니다:

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

초보자들이 자주 범하는 실수가 바로 이 부분입니다. elem 변수를 변경하는 것은 배열 내의 요소 자체를 변경하지 않습니다. 이를 확인해 보겠습니다:

console.log(arr); // 배열이 변경되지 않았습니다

배열이 변경되지 않는 이유는 elem 변수에 요소의 참조가 아닌 사본이 저장되기 때문입니다. elem을 변경하면 사본에 영향을 미치지만, 배열 자체에는 영향을 미치지 않습니다.

이 문제를 해결하려면 배열 요소 자체를 변경해야 합니다:

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

console.log(arr); // 이제 배열이 변경되었습니다