forEach()와 map()의 차이점

공통점

---

 

forEach, map, reduce의 공통점은 "배열을 이용한다"는 점이다.

배열의 값을 조작해서 원하는 결과값을 도출하는데 의미가 있다.

 

 

 

 

forEach()와 map()의 차이점

---

1. 새로운 배열을 반환하는 map()

 

다른 점을 알아보자.

 

forEach()가 배열 요소마다 한 번씩 주어진 함수(콜백)를 실행하는 것과 달리,

map()은 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한 결과를 모아 새로운 배열을 반환한다는 특징을 가지고 있다.

 

그리고, 그 함수는

1. currentValue (배열 원소의 값)

2. index (현재 요소의 인덱스)

3. array (현재 배열)

이 세 개의 인자를 가지고 호출된

다.

 

배열의 각 원소에 3을 곱하는 코드를 두 메서드의 특징에 맞게 짜본다면, 다음과 같이 구성할 수 있다.

 

// Example of forEach()

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

arr.forEach(num => {
  mulArr.push(num * 3);
});

console.log(mulArr); // [3, 6, 9, 12, 15]

// Example of map()

const arr = [1, 2, 3, 4, 5];
const mulArr = arr.map(num => num * 3);

console.log(mulArr); // [3, 6, 9, 12, 15]

 

 

 

 

2. 리턴값을 보내지 않는 forEach()

 

forEach()는 문밖으로 리턴값을 받지 못한다. 아래의 코드를 살펴보자. 

 

let arr = [1,2,3,4,5];
let a = arr.forEach(function(value){
	return value;
});
console.log(a);   //undefined

 

이렇게 undefined가 출력된다. 

 

하지만 같은 경우라도 map을 이용하면 다르다.

 

let arr=[1,2,3,4,5];
let a = arr.map(function(value){
	return value +1;
});
console.log(a);  // [2,3,4,5,6]

 

이 경우에는 [2,3,4,5,6]이 들어있는 배열이 출력된다.

map은 리턴값을 출력할 수 있다.

 

즉, forEach와 map의 가장 큰 차이는 바로 리턴값에 있다.

 

또한 forEach() 기존의 Ararry를 변경하는 반면, map()은 새로운 Ararry를 반환합니다.

성능면에서는 map이 forEach보다 빠르고 유리하다. 

상황에 따라 맞게 사용하면 될 것이다

 

 

 

 

 

reduce()

---

그럼 reduce에 대해서도 알아보자. reduce의 문법은 아래와 같다.

 

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
	return accumulator + currentValue;
});

reduce의 인자로는 총4개를 받을수가 있는데 이전값,현재값,index,배열을 받을수가 있다.

간단한 코드를 통해 reduce를 알아보자

 

 

let arr=[1,2,3,4,5];
let a = arr.reduce(function(preValue, currentValue){
	return preValue + currentValue;
});

console.log(a);   // 15

 

이전에 살펴본 map과 달리 reduce는 배열이 아닌 하나의 값으로 출력을 하고 있다.

이전값과 현재값을 더하는 방식으로 값을 출력해 내는데

 

1+2 = 3
3+3 = 6
6+4 = 10
10+5 = 15

 

이런형태로 값을 도출해 내는 걸 알수 있다.

 

prevValue만 리턴하면 배열의 첫번째 요소 1이 리턴이 된다.
currentValue는 배열의 마지막 요소 5가 리턴이 된다.

 

 

 

 

---

<정리>

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

 

2. map ()은 메모리를 할당하고 반환 값을 저장한다.

forEach ()는 반환 값을 버리고 항상 정의되지 않은 값을 반환한다.

 

3. forEach ()는 콜백 함수가 현재 배열을 변경하도록합니다. map ()은 대신 ​​새 배열을 반환한다.

 

 

 

 

출처 및 참조: https://radlohead.github.io/front-end/javascript-forEach-map-reduce.html ,

https://frontdev.tistory.com/entry/JS-Map-vs-ForEach ,

https://pewww.tistory.com/12