[JavaScript] forEach()와 map()의 차이점

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

forEach()가 배열 요소마다 한 번씩 주어진 함수(콜백)를 실행하는 것과 달리,
map()은 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한 결과들을 모아 새로운 배열을 반환한다는 특징을 가지고 있다

그리고 그 함수는
1. currentValue (배열 원소의 값)
2. index (현재 요소의 인덱스)
3. array (현재 배열)

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

배열의 각 원소에 3을 곱하는 코드를 forEach()와 map()의 특징에 맞게 짜본다면 다음과 같이 작성이 가능하다

예시: 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]

예시: map();

const arr;
const mulArr = arr.map(num => num * 3);

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

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

forEach()는 밖으로 return값을 반환하지 못한다.

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

console.log(a); //undefined

위와 같이 forEach()를 return하면 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()는 기존의 Array를 변경하는 반면, map()은 새로운 Array를 반환한다.

3. reduce()

reduce()의 문법은 아래와 같다.

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

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

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

console.log(a); //15
/*
1 + 2 = 3
3 + 3 = 6
6 + 4 = 10
10 + 5 = 15
*/

앞과 뒤의 값을 더하여 15라는 값을 도출하는 것을 알 수 있다.

preValue만 리턴할 경우, 배열의 첫번째 요소인 1이 리턴된다.
currentValue는 배열의 마지막 요소인 5가 리턴된다.