map 메서드와 forEach 메서드 활용

 

배열을 반복하는 메서드

 

오늘 팀미팅을 하며, 팀원님이 내가 낸 문제에 대한 질문으로 해당 문제를 forEach 메서드로도 풀이가 가능한지를 물어보셨다. 그런데 그 순간 '어.. 가능할까?' 생각하다가 다른 팀원님이 대신 답을 해주셔서 넘어갔는데, map 메서드에 비해 자주 쓰지 않아서, 조금만 응용할 줄 알면 사용이 가능한 부분을 제대로 몰랐기 때문에 답변을 못했다고 생각한다.

 

forEach 메서드와 map 메서드는 모두 배열을 반복하는 메서드인데 약간의 차이점이 있다.

• forEach 메서드는 배열을 반복만 한다.
• map 메서드는 반복하면서 새 배열을 반환한다.

위 차이점말고도 작년에 올린 포스팅에서도 차이점에 대해 적어보았다.

(2023.09.12 - [자바스크립트] - map과 forEach의 차이)

map과 forEach의 차이

 

이런 차이점이 있어서 API를 통해 DB에서 데이터를 받아올 때 지금까지 쭉 map 메서드만 활용했던 것 같다.

 

기본적으로 배열을 반복하기 때문에, 반복하면서 배열이나 데이터를 가지고 연산을 할 수 있다.

const items = [
  { name: "mouse", amount: 10000 },
  { name: "keyboard", amount: 12000 },
  { name: "speaker", amount: 80000 },
];

let totalAmount = 0;

items.forEach((item) => totalAmount += item.amount);

 

위 예시는 forEach 메서드를 활용해서 items 배열의 amount를 합하는 문제인데, reduce 메서드로도 쉽게 풀 수 있지만 배열을 반복하는 메서드로도 간단하게 풀이할 수 있다. 

 

위 예시처럼 map 메서드를 활용하면 아래 예시와 같은 코드가 도출된다.

const items = [
  { name: "mouse", amount: 10000 },
  { name: "keyboard", amount: 12000 },
  { name: "speaker", amount: 80000 },
];

let totalAmount = 0;

items.map((item) => totalAmount += item.amount);

 

메서드가 map으로 바뀐 것 말고는 똑같다. 그런데 map 메서드는 새 배열을 반환하기 때문에, map 메서드를 사용한 코드 자체를 변수로 만들어서 콘솔에 띄워보면 다음과 같은 결과가 나온다.

const items = [
  { name: "mouse", amount: 10000 },
  { name: "keyboard", amount: 12000 },
  { name: "speaker", amount: 80000 },
];

const result = items.map((item) => totalAmount += item.amount);

console.log(result);   // [10000, 22000, 102000]

 

하나하나 반복하면서 값을 누적하여 새 배열을 반환했다. 결과적으로 2번 인덱스에 원하는 결과값이 나온 것을 확인할 수 있다. 최종결과값만 구하려면 result[2]를 출력하면 된다.

 

결과적으로 최종 합계를 담은 변수를 선언하는 것이 효율성 측면에서 좋은 코드가 된다.