JavaScript map()으로 새 요소를 저장하는 올바른 방법

JavaScript에서 map() 함수는 원본 배열을 변경하지 않고 새로운 배열을 반환하는 특징이 있습니다. 따라서 map()의 실행 결과를 반드시 변수에 담거나 다른 배열에 추가해야 새 요소가 저장됩니다. 아래 예제를 통해 map()을 올바르게 활용하여 각 하위 배열의 요소에 인덱스 값을 더한 새 배열을 만드는 방법을 살펴보겠습니다.

예제 코드

다음은 전체 코드입니다 −

const addIndexValueToArrayElement = function (arrObject) {
   const updatedArrayValue = [];
   arrObject.forEach(function (ob) {
      const mapValue = ob.map(function (value) {
         return value + arrObject.indexOf(ob)
      })
      updatedArrayValue.push(mapValue)
   })
   return updatedArrayValue;
};
const output = addIndexValueToArrayElement([
   [4, 5],
   [7, 56],
   [34, 78],
]);
console.log(output);

코드 동작 원리

• forEach()를 사용해 바깥 배열의 각 하위 배열(ob)을 하나씩 순회합니다.
• 각 하위 배열에 대해 map()을 호출하여 모든 요소에 해당 배열의 인덱스(arrObject.indexOf(ob))를 더한 새로운 배열을 생성합니다.
• map()이 반환한 새 배열을 updatedArrayValue에 push()하여 결과를 저장합니다.

여기서 핵심은 map()의 반환값을 mapValue 변수에 할당했다는 점입니다. 반환값을 받지 않으면 계산 결과가 사라지고 원본 배열만 남게 됩니다.

프로그램 실행 방법

위 프로그램을 실행하려면 터미널에서 아래 명령어를 입력하세요 −

node fileName.js

여기서는 파일 이름이 demo323.js라고 가정합니다.

실행 결과

위 코드를 실행하면 다음과 같은 출력이 나타납니다 −

PS C:\Users\Amit\javascript-code> node demo323.js
[ [ 4, 5 ], [ 8, 57 ], [ 36, 80 ] ]

결과를 보면 첫 번째 하위 배열 [4, 5]는 인덱스 0을 더했기 때문에 그대로 유지되었고, 두 번째 배열 [7, 56]에는 1이 더해져 [8, 57], 세 번째 배열 [34, 78]에는 2가 더해져 [36, 80]이 된 것을 확인할 수 있습니다.