forEach()와 map의 차이점

선요약

map은 리턴 값을 받을 수 있지만, forEach는 리턴 값을 받을 수 없으며 리턴 값은 항상 undefined이다.

---

공통점

1. Array 관련 메서드들로 ES5 부터 등장하였다.

2. 세 개의 인자를 가지고 호출된다.
 - currentValue (배열 원소의 값)
 - index (현재 요소의 인덱스)
 - array (현재 배열)

 

 

차이점

forEach()가 배열 요소마다 한 번씩 주어진 콜백함수를 실행 -> 새로운 배열 X
map()은 배열 내의 모든 요소 각각에 대하여 주어진 콜백함수를 호출한 결과를 모아 새로운 배열을 반환한다

 

---

Array.prototype.forEach

• forEach() 메서드는 for문을 대체할 수 있는 함수다. forEach 메서드는 자신의 내부에서 반복문을 실행한다.
• forEach()는 주어진 콜백함수를 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행한다. 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않는다.
• forEach()는 배열을 변형하지 않는다. 콜백함수를 리턴하면서 새로운 배열을 반환하거나 변형할 수 있다.
• forEach 메서드의 반환값은 언제나 undefined다.

const numbers=[1,2,3];
const result = [];
numbers.forEach(x=>result.push(x**2));
console.log(result);

//[1,4,9]*

---

Array.prototype.map

• map은 콜백함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다. 
• 이때 원본 배열은 변경하지 않는다.
• map 메서드에서는 원본 배열의 원소와 일대일 mapping이 진행되기 때문에 원본 배열과 mapping후 배열의 길이는 항상 같다.
• 콜백함수는 배열 값이 들어있는 인덱스에 대해서만 호출된다. 즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않는다.

const numbers=[1,2,3];
const mult = numbers.map(x=>x*2);
console.log(mult)

// [2,4,6];

---

참고자료

MDN Array.prototype.map()
MDN Array.prototype.forEach()
[JS] forEach()와 map() 차이점
[Javascript] 반복문 for, forEach, map 차이점
forEach(), map(), 무슨 차이가 있을까?