[JS] forEach 와 map

forEach

forEach(callbackFn)
forEach(callbackFn[, thisArg])

forEach 메소드는 for 문 대신 사용할 수 있는 메소드 입니다.

배열을 순회하며 배열의 각 요소에 대하여 인자로 주어진 콜백함수를 실행하고, 반환값은 undefined입니다.
또한 주어진 콜백 함수의 매개변수를 통해 배열 요소의 값, 요소 인덱스, forEach 메소드를 호출한 배열(this)를 전달 받을 수 있습니다.

forEach 메소드는 원본 배열(this)을 변경하지 않습니다. 하지만 콜백 함수는 원본 배열(this)을 변경할 수는 있습니다.

forEach 메소드는 for 문과는 달리 break 문을 사용할 수 없기 때문에 배열의 모든 요소를 순회하며 중간에 순회를 중단할 수 없습니다.

forEach 메소드는 for 문에 비해 성능이 좋지는 않지만 for 문보다 가독성이 좋으므로 배열을 다룰 때는 적극 사용을 권장합니다.

map

arr.map(callback(currentValue[, index[, array]])[, thisArg])

배열을 순회하며 각 요소에 대하여 인자로 주어진 콜백 함수의 반환값(결과값)으로 새로운 배열을 생성하여 반환합니다. 이때 원본 배열은 변경되지 않습니다.

map 메소드는 배열을 순회하며 요소 값을 다른 값으로 맵핑하기 위한 함수입니다.
map 메소드가 생성하여 반환하는 새로운 배열의 length 프로퍼티 값은 map 메소드를 호출한 배열의 length 프로퍼티 값과 반드시 일치합니다. 즉, map 메소드를 호출한 배열과 map 메소드가 생성하여 반환한 배열은 1:1로 맵핑합니다.

주어진 콜백 함수의 매개변수를 통해 배열 요소의 값, 요소 인덱스, map 메소드를 호출한 배열(this)를 전달 받을 수 있습니다.

forEach vs map

✅ 공통점

자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출합니다.

✅ 차이점

• forEach
  단순히 반복문을 대체하기 위한 고차 함수
  → 언제나 undefined 반환

• map
  요소값을 다른 값으로 맵핑한 새로운 배열을 생성하기 위한 고차 함수
  → 콜백 함수의 반환값으로 구성된 새로운 배열 반환

  
  

  ---

  참고 자료

• https://poiemaweb.com/js-array-higher-order-function

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map