map과 forEach차이

forEach와 map은 비슷해 보이지만, 그 용도와 반환값에서 큰 차이가 있다는걸 알게됬다.

 

 

map, forEach

• map: 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 새 배열로 반환한다. 원본 배열의 길이와 같은 길이의 새 배열이 생성되고, 주로 반환 작업에 사용된다.
  • 원본 배열을 그대로두고 새로운 배열을 만든다.

 

• forEach: 배열의 각 요소에 대해 주어진 함수를 호출하지만, 결과를 반환하지 않는다! 주로 반복 작업에 사용된다.
  • 콜백으로 들어오는 매개함수를 매 요소마다 실행시켜준다.

 

사용 예제

01. forEach

주로 forEach는 사이드 이펙트를 발생시키기 위해 사용된다.

예를들면 아래 코드처럼 모든 li button 요소에 대해 클릭 이벤트를 추가해야할 때 말이다.

 this.$keywordHistory.innerHTML = this.data
      ?.map((keyword) => `<li><button>${keyword}</button></li>`)
      .join('');

    this.$keywordHistory
      .querySelectorAll('li button')
      .forEach(($item) => $item.addEventListener('click', () => {}));

 

02. map vs forEach 

const prices = ['1000','2000','3000'];

prices.forEach((price)=>console.log(price + '원'));
prices.map((price)=>console.log(price + '원'));

// forEach와 map 둘다 1000원, 2000원, 3000원 리턴값은 같다

 

주석에 명시한대로 forEach와 map 둘다 리턴 값은 같다.

하지만 위의 상황에서는 mdn에 명시되어있는것을 따른다면, map보단 forEach가 더 어울린다.

 

mdn에서 명시하기를 forEach는 새로운 배열을 리턴 X

map은 새로운 '배열'을 리턴해주기 때문에..

 

정리하자면, map과 forEach는 목적에 맞게 사용하면 된다.