TIL - forEach 와 map함수의 차이

알고리즘을 공부하다가 forEach와 map의 차이점이 궁금해져서 알아보았습니다.

forEach

forEach():

1. Array 요소를 제공된 함수로 한 번 실행합니다.
   콜백 함수를 인자로 받아, 배열의 각 요소에 콜백함수를 실행한다.

일반적인 forEach문
arr.forEach(function(v, i, arr) {
  console.log(v);
});

2. forEach() 메소드는 아무 값도 반환하지 않는다. (undefined)
   단지 제공된 함수로 Array 요소를 호출한다.

let a = [1,2,3,4,5]
let b = a.forEach((n)=>{
	String(n)
})
console.log(b) // undefiend

3. 제공된 콜백은 호출하는 Array를 변경할 수 있다.

let a = [1,2,3,4,5]
let b = a.forEach((n)=>{
	if(n === 2){
		a.shift()
	}
})
console.log(a) // [2,3,4,5] 
1이 없어진것을 볼 수 있다.

4. Array안에 데이터를 변경하려는 것이 아니라 데이터베이스에 저장하거나 로그아웃하는 것과 같은 작업에 유용할 수 있다.

var arr = ["a", "b", "c", "d"];

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

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

Map

map():

1. 기존의 배열을 이용해, 새로운 배열을 생성할 때 사용한다.
   콜백 함수를 인자로 받아, 배열의 각 요소에 대해서 실행한 결과 값을 반환한다.

const newArr = arr.map(function(v, i, arr) {
  return condition;
});

2. map의 경우 요소가 아닌 새로운 값을 만들어서 return할 수 있다.

let arr = [1, 2, 3, 4, 5];
let newArr = arr.map(function(v, i, arr) {
  return v*2;
});
// 2, 4, 6, 8, 10

3. 다른 메소드들과 함께 사용할 수 있다. (map(), filter(), reduce() 등)

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

---

결론 - 차이점

map()과 forEach()와 다른점은

1. map은 메모리를 할당하고 리턴 값을 저장하여 Array와 동일한 사이즈의 새로운 Array을 반환한다.

2. forEach는 리턴 값을 버리고 항상 undefined를 리턴한다.

3. 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