[javascript] 배열 순회 시 요소 변경하기

07 Dec 2023

자바스크립트에서 배열을 순회하면서 배열의 요소를 변경해야 할 때가 종종 있습니다. 이번 블로그 포스트에서는 배열을 순회하면서 요소를 변경하는 방법을 알아보겠습니다.

기본적인 배열 순회

먼저, 기본적인 배열 순회 방법을 살펴보겠습니다. forEach 메소드를 이용하면 간편하게 배열을 순회할 수 있습니다.

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

arr.forEach((element, index, array) => {
  // 요소 변경을 위한 로직 작성
});

forEach 메소드는 콜백 함수를 인자로 받으며, 각 요소마다 콜백 함수가 실행됩니다. 콜백 함수의 인자로는 요소(element), 인덱스(index), 배열(array)이 전달됩니다. 여기서는 element를 변경하는 로직을 작성하면 됩니다.

배열 순회 중에 요소를 변경하기 위해서는 해당 요소의 값을 수정하면 됩니다. 배열의 요소는 원본 배열에 영향을 주기 때문에, 순회 중에 변경된 요소는 순회가 끝난 후에도 변경된 상태를 유지합니다.

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

arr.forEach((element, index, array) => {
  array[index] = element * 2;
});

console.log(arr); // [2, 4, 6, 8, 10]

위 예제에서는 배열의 요소를 2배로 변경하는 예시입니다. 배열을 순회하면서 각 요소에 접근하고, 해당 요소를 변경한 뒤에 원본 배열에 할당하는 방식으로 요소를 변경할 수 있습니다.

[Array.prototype.forEach() - JavaScript MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)