forEach, map, reduce

우선 위의 3가지의 문법을 보기 전에 짚고넘어갈 점이 있다.

식에 있는 대괄호에 해당하는 것들은 생략이 가능하다.

 

forEach

Array.prototype.forEach(callback [, thisArg])

• 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 ])

 

Map

for문을 통해 새로운 배열을 만드는 목적 -> return 필수

Array.prototype.map(callback[, thisArg])

• callback: function (currentValue[, index [, originalArray]])
  • currentValue: 현재값
  • index: 현재 인덱스
  • originalArray: 원본 배열
• thisArg: this에 할당할 대상. 생략 시 global객체
•  

const a = [ 1, 2, 3 ]
const b = a.map(function (v, i, arr) {
    console.log(v, i, arr, this)
    return this[0] + v
}, [ 10 ])

 

 

Reduce

for문을 돌려서 최종적으로 다른 무언가는 만드는 목적 -> return 필수

Array.prototype.reduce(callback [, initialValue])

• initialValue: 초기값. 생략 시 첫 번째 인자가 자동 지정되며,
  이 경우 currentValue는 두 번째 인자부터 배정된다.
• callback: function (accumulator, currentValue [, currentIndex [, originalArray]])
  • accumulator: 누적된 계산 값
  • currentValue: 현재 값
  • currentIndex: 현재 인덱스
  • originalArray: 원본 배열

const arr = [ 1, 2, 3 ]
const res = arr.reduce(function (p, c, i, arr) {
  console.log(p, c, i, arr, this)
  return p + c
})

cosole.log(res) // 16 = 10 + 1 + 2 + 3

• 다음과 같이 초기값 10부터 p에 들어가고 c의 첫 번째 인자인 1과 더해진다.
• 그다음 11이 다시 p의 자리로 들어가고 11과 다음 인자의 값인 2와 더해진다.
• 그래서 마지막 결과가 16이 나온다.

 

 

그렇다면 뒤에 initialValue인 10을 지우면 어떻게 될까?

위에서 설명했듯이 생략 시 arr의 첫 번째 인자가 자동으로 지정되고 2부터 시작하게 된다.

따라서 아래와 같이 나온다.

const arr = [ 1, 2, 3 ]
const res = arr.reduce(function (p, c, i, arr) {
  console.log(p, c, i, arr, this)
  return p + c
})

cosole.log(res) // 6

 

reduce를 통해서 1~10까지의 합을 구해보자!

const a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const res = a.reduce(function(a,c){ return a + c });
console.log(res);	// 55

//Arrow Function
const res = a.reduce((a,c) => a + c );
console.log(res);	// 55

 

 

출처

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map