forEach()
가 배열 요소마다 한 번씩 주어진 함수(콜백)를 실행하는 것과 달리,
map()
은 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한 결과들을 모아 새로운 배열을 반환한다는 특징을 가지고 있다
그리고 그 함수는
1. currentValue (배열 원소의 값)
2. index (현재 요소의 인덱스)
3. array (현재 배열)
이 세 개의 인자를 가지고 호출된다.
배열의 각 원소에 3
을 곱하는 코드를 forEach()
와 map()
의 특징에 맞게 짜본다면 다음과 같이 작성이 가능하다
const arr = [1, 2, 3, 4, 5];
const mulArr = [];
arr.forEach(num => {
mulArr.push(num * 3);
});
console.log(mulArr); //[3, 6, 9, 12, 15]
const arr;
const mulArr = arr.map(num => num * 3);
console.log(mulArr); //[3, 6, 9, 12, 15]
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를 반환한다.
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
가 리턴된다.