Study/JavaScript(Clean code)

[JavaScript][clean-code] map vs forEach

갈푸라떼 2022. 6. 5. 20:58

* map vs forEach의 차이

  • map : 새로운 배열 만들기
  • forEach : 요소가 loop될때마다 함수를 실행시켜준다.
const prices = ['1000', '2000', '3000'];

// forEach는 함수를 실행시켜준다.
const newPricesForEach = prices.forEach((price) => return price + '원');

// map은 새로운 배열을 만들어 낸다.
const newPricesMap = prices.map((price) => return price + '원');

// result
newPricesForEach // undefined
newPricesMap // ['1000원', '2000원', '3000원'];
  • forEach의 반환값은 undefined이다. 요소하나하나를 돌리면서 callback으로 들어오는 매개변수로 들어오는 함수를 실행시켜주는것이 끝이다.
  • map은 반환된 값 즉, 결과값이 반영이 되어 새로운 배열을 만든다. (원본 배열은 손상시키지 않는다.)

결론적으로 용도에 알맞게 잘 사용하면 된다.