[JS] forEach vs Map

forEach

for문을 대체할 수 있는 함수, 콜백함수를 인자로 받고 각 요소에 콜백 함수를 실행시킨다.
즉, 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.
단, 아무 값도 반환하지 않는다.

 

문법

const arr = [1, 2, 3, 4, 5, 6];

const arr2 = arr.forEach((currentElement, index, array) => {
	  console.log(`요소: ${currentElement}`); // 배열의 요소가 순서대로 출력된다 1, 2, 3, 4, 5, 6
    console.log(`index: ${index}`); // 0, 1, 2, 3, 4, 5 순서대로 출력
    console.log(array) // [1, 2, 3, 4, 5, 6] 5번 출력
});

매개변수로 콜백함수를 받을때 기본적으로 매개변수(파라미터)는 요소, index 그리고 현재 forEach메서드를 호출한 배열이다. 하지만 사용하지 않는 매개변수(파라미터)는 뒤에서부터 순서대로 생략이 가능하다.

 

Ex1)

const arr = [1, 2, 3, 4, 5];

const arr2 = arr.forEach(i => i * 2);
console.log(arr2); // undefined

forEach는 새로운 배열을 만들지 않으면 undefined라서, 빈 배열에 넣어줘야 한다.

 

Ex2)

const arr = [1, 2, 3, 4, 5];
let arr2 = [];

arr.forEach(i => arr2.push(i*2));
console.log(arr2); // [2, 4, 6, 8, 10]

 

 

---

Map

배열의 각 요소에 대해 callback을 실행하고 실행 결과를 모은 새 배열을 리턴한다.
배열을 순회하므로 중간에 "break;"문을 사용할 수 없다. 이런 경우라면 for()문을 사용해야 한다.

 

const arr = [1,2,3,4,5];
console.log(arr.map(i => i*2)); // [2, 4, 6, 8, 10]

forEach와 달리 새로운 배열을 만들지 않아도 새로운 배열을 만들어 리턴한다.

 

 

차이점

forEach vs Map
forEach의 경우 데이터 변경이 아닌, 단순 순회의 목적으로 사용할때 사용하면 된다.
map의 경우 데이터 변경이 필요할때 사용하면 좋다. 성능적으로 더 유리할 뿐만 아니라 새로운 배열을 반환해 주므로 결과값을 배열로 받을 수 있다.

Map은 메모리를 할당하고 리턴값을 저장하지만 forEach는 리턴값을 버리고 항상 undefined를 리턴한다(새로운 배열을 만들지 않으면) forEach는 콜백함수로 현재 배열를 반환하지만 Map은 새로운 배열을 리턴한다.

즉, Map을 사용하면 결과값을 배열로 받을 수 있다. 함수 안의 결과값을 계산하지 않고, 배열로 받기 위해서는 map을 사용하는게 유리하다.

 

---

출처

https://velog.io/@limes/Javascript-Array-Method-for-each-%EC%99%80-map%ED%95%A8%EC%88%98%EC%9D%98-%EC%B0%A8%EC%9D%B4

[Javascript] Array Method - for each 와 map함수의 차이

https://velog.io/@yuni/JS-forEach-vs-Map