JavaScript - forEach, map, reduce
in JS on 공부, Javascript
forEach
for문 편하게 돌리게 하기 위해서이다.
Array.prototype.forEach(callback[, thisArg])
=> dd표기법이다. []
안에 있는 애는 생략 가능하다.
callback 인자는 필수로 받는 것이다.
- callback : function(currentValue[, index[, originalArray]])
- currentValue : 현재값
- index : 현재 인덱스
- originalArray : 원본 배열
- thisArg : this에 할당할 대상. 생략시 global 객체
const a = [1, 2, 3]
a.forEach(function(v, i, arr){
console.log(v, i, arr, this)
}, [10,11,12])
1 0 [1,2,3] [10,11,12]
2 1 [1,2,3] [10,11,12]
3 2 [1,2,3] [10,11,12]
위처럼 결과가 나올 것이다.
currentValue 중요.
for문 돌리는 거랑 같은 개념
const a = [1, 2, 3]
const b = a.map(function(v, i, arr){
console.log(v, i, arr, this)
return this[0]+v //새로운 무언가를 만드는 거니까 무조건 return을 해줘야 한다.
}, [10])
[11, 12, 13]이 될 것이다.
map
for문을 돌려서 새로운 배열을 만드는 목적이다.
reduce
Es5에서 동작한다.
for문을 돌려서 최종적으로 다른 무언가를 만드는 목적이다.
const a = [1, 2, 3]
const res = arr.reduce(function(p, c, i){
console.log(p, c, i)
return p + c
}, 10)
10 1 0
11 2 1
13 3 2
res = 16 = 10 + 1 + 2 + 3
가 된다.
p = 누적된 결과값. 처음에 10이 있다가 11이 반환되어서 두번째 accumulator로 다시 들어가서 11+2, 13+3이 되어 16이 된다.
const a = [1, 2, 3]
const res = arr.reduce(function(p, c, i){
console.log(p, c, i)
return p + c
})
1 2 1
3 3 2
res = 6
initial value가 없으면 첫번째 값이 들어가고 순회는 2번째부터 한다.