JS - forEach vs Map

forEach

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

문법

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

const newMyArr = myArr.forEach((currentElement, index, array) => {
    console.log(`요소: ${currentElement}`); // 요소: 1,2,3,4,5 순으로 출력(배열의 요소)
    console.log(`index: ${index}`); //index: 0,1,2,3,4 순으로 출력(배열의 인덱스)
    console.log(array); //[1,2,3,4,5] * 5번출력
});

console.log(newMyArr);

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

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

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


console.log(arr.forEach(i => i*2))); //  [undefined]

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

Map

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

문법

arr.map(function(element, index, array){  }, this);

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
	console.log(this) // 80
}, 80);

콜백함수 function()은 각 배열 요소에 대해 호출되며, map() 메소드는 언제나 현재의 element와 그것의 index, 그리고 전체 array 객체를 해당 요소에 전달합니다.

this인수는 콜백함수 내부에서 사용되게 되며, 기본적으로 이 값은 undefined입니다. 하지만 위 예시와 같이 this 자리에 값을 넣어준다면 this의 값은 변경됩니다.

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

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

map메소드는 forEach와 마찬가지로 순회하며 인수로 전달받은 콜백 함수를 반복 호출한 합니다. 그러나 forEach와 다르게 콜백 함수의 반환값들로 구성된 새로운 배열을 반환합니다. 즉, return 값이 존재합니다. 그러나 원본 배열은 변경하지 않습니다.

forEach vs Map

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

map()은 메모리를 할당하고 리턴 값을 저장하지만, forEach()는 리턴 값을 버리고 항상 undefined를 리턴합니다. forEach()는 콜백함수로 현재 Array를 변환하지만, map()은 새로운 Array를 리턴합니다.

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
https://d-cron.tistory.com/11