.forEach 와 .map()의 차이

우리가 어떤 배열에서 루프를 돌때 주로 사용하는 함수인 .forEach / .map을 알아보겠습니다.

forEach

• 각 요소에 대해 콜백을 실행한다.
• 값을 반환하지 않습니다. 따라서 단순히 배열을 반복한다면 적합

map

• 각 요소에서 함수를 호출하여 결과로 새로운 배열을 만들어 각 요소를 새 요소에 매핑시킨다.
• 따라서 원본 배열을 유지하면서 새로운 결과를 원한다면 map이 적합

const characters = ["spiderman", "tanos", "ironman"];
let rr = characters.map(character => {
	console.log(character);
});

console.log(rr); // [undefined, undefined]
// map을 잘 살릴려면 return이 있어야 한다.

그외의 메소드

reduce

• reduce()메소드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환하는 메소드이다.
  4개의 인자값을 가지는데

1. 누산기
2. 현재값
3. 현재 인덱스
4. 초기값
   reduece 함수의 반환값은 누산기에 할당되고 누산기는 루프 중 계속 유지됨으로 최종적으로 하나의 값이 return 된다.

배열.reduce((누산기, 현재값, 현재인덱스, 요소) => {
	return 결과
}, 초기값);

• example
  배열내에 중복되는 값을 세어 total count를 내는 로직

const names = ["김", "이", "박", "정", "최", "김", "최", "정", "이", "이"];
const result = names.reduce((acc, cur) => {
  if (!acc[cur]) {
    acc[cur] = 0;
  }
  acc[cur] += 1;

  return acc;
}, {});
console.log(result);
// { '김': 2, '이': 3, '박': 1, '정': 2, '최': 2 }

요약

• 각 요소에 대해 단순한 반복 action을 한다면 forEach 사용
• 원본을 그대로 두고 새로운 배열을 생성하려면 map 사용
• 하나의 결과 값을 반환하려면 reduce 사용