자바스크립트 forEach() 실행 중 배열 값을 변경할 수 있을까?

결론부터 말씀드리면, 네, 자바스크립트에서 forEach()를 사용하는 동안 배열의 값을 변경하는 것이 가능합니다.

다만 한 가지 중요한 조건이 있습니다. 콜백 함수의 첫 번째 매개변수(요소 값)에 직접 값을 대입해서는 원본 배열이 바뀌지 않으며, 반드시 두 번째 매개변수인 index를 활용해야 합니다.

예제 코드

let arr = [1, 2, 3, 4];
arr.forEach((val, index) => arr[index] = val * val);
console.log(arr);

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

[ 1, 4, 9, 16 ]

동작 원리

위 예제에서는 각 요소의 제곱값을 계산한 뒤, index를 이용해 원본 배열의 해당 위치에 직접 대입했습니다. 그 결과 forEach()가 배열을 순회하는 동안 실제 배열 arr의 값이 [1, 4, 9, 16]으로 변경된 것을 확인할 수 있습니다.

주의할 점

val = val * val;처럼 콜백의 매개변수 자체에 값을 할당하는 방식은 원본 배열에 아무런 영향을 주지 못합니다. 숫자나 문자열 같은 기본형(primitive) 값은 복사되어 전달되기 때문입니다. 따라서 원본 배열을 수정하려면 반드시 arr[index] = 새로운값 형태로 접근해야 합니다.

반면 배열의 요소가 객체처럼 참조형(reference type)이라면, 해당 객체의 속성은 콜백 내부에서 직접 수정할 수 있습니다.

참고: 새로운 배열이 필요하다면?

원본 배열을 유지하면서 변환된 값을 얻고 싶다면 map() 메서드를 사용하는 것이 더 안전하고 가독성도 좋습니다. forEach()는 반환값이 없어 주로 부수 효과(side effect)를 위한 용도로 적합합니다.