JavaScript - forEach, map, reduce


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번째부터 한다.