Javascript ForEach vs map

이번 글에서는 Javascript의 Array Method인 for each와 map의 차이점에 대해 공부한점을 정리하려합니다.

for each 와 map의 공통점이라면 둘 다 배열을 이용한다는 점이지만

for each는 문 밖으로 리턴값을 보내지 못하고 map은 새로운 배열을 반환한다는 차이점이 있다.

ForEach
일반적인 for each문
arr.forEach(function(v, i, arr) { console.log(v); });
forEach(): 배열 요소마다 한 번씩 제공한 함수를 실행한다.
콜백 함수를 인자로 받아, 배열의 각 요소에 콜백 함수를 실행한다.
반환되는 값이 없다.
forEach() 메소드는 아무것도 리턴하지 않는다. (undefined)
제공된 함수로 Array 요소를 호출한다, 이 때 콜백은 호출하는 Array를 변경할 수 있으며 forEach문은 구문 밖으로 return 값을 받지 못한다.
let arr = [1,2,3,4,5]; let newArr = arr.forEach(function(e,i){ return e; }) // undefined

Map
일반적인 map
let newArr = arr.map(function(v,i,arr){ return condition; })
map(): 모든 Array 요소가 제공된 함수로 호출될 때 새로운 array를 생성합니다.
기본의 배열을 이용하여 새로운 배열을 생성할 때 사용한다.
콜백 함수를 인자로 받아 배열의 각 요소에 대해서 실행한 결과 값을 반환한다.
요소가 아닌 새로운 값을 만들어서 return할 수 있으며 return 값 자체를 반환한다.
let arr = [1,2,3,4,5]; let newArr = arr.map(function(v,i,arr){ return v + 1; }) // newArr = [2,3,4,5,6]
만약 함수형 프로그래밍을 선호한다면 map()을 사용하는것이 더 바람직하다.

forEach()가 원래의 Array에 영향을 주고 변경하는 반면 map()은 새로운 Array를 반환하기 때문에 원래 배열이 변경되지 않기 때문이다.

따라서

forEach()는 배열의 데이터를 변경하지 않을때는 좋지만 데이터베이스에 저장하거나 로그아웃과 같은 작업에 유용할 수 있다.

let arr = ['a', 'b', 'c', 'd'];

arr.forEach((letter) => {
	console.log(letter);
});

// a
// b
// c
// d

map()은 데이터를 변경할 때 선호되며, 더 빠르게 새로운 배열을 반환한다.

즉, 다른 메소드(map(), filter(), reduce() 등)과 함께 사용한다면 더 효과적이다.

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

let arr2 = arr.map(num => num*2).filter(num => num > 5);
// arr2 = [6,8,10]

forEach()로 할 수 있는 작업은 map()으로도 가능하며, 그 반대도 가능하다.

map()은 메모리를 할당하고 반환 값을 저장하지만 forEach()는 반환 값을 버리고 항상 정의되지 않은 값(undefined)을 반환한다.

forEach()는 콜백 함수가 현재 배열을 변경하지만 map()은 새로운 배열을 반환한다.

참고한 곳 : https://frontdev.tistory.com/entry/JS-Map-vs-ForEach