forEach, map, reduce

forEach

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

몰랐던것들
array는 forEach()를 호출한 배열. 즉 여기선 arr이다.

forEach 예시문1

const a = [ 1, 2, 3 ]
a.forEach(function (v, i, arr) {
    console.log(v, i, arr, this)
}, [ 10, 11, 12 ])

• v와 i가 차례로 나온다.
• 여기서 arr에 해당하는 부분은 배열a이다.
• thisArg에 해당하는 부분은 배열 [10, 11, 12]이다.

forEach 예시문2

const a = [ 1, 2, 3 ]
a.forEach(function (v, i, arr) {
    console.log(this[i])
}, [ 10, 11, 12 ])
//expected result
// 10
// 11
// 12

this는 [10, 11, 12]를 가리키므로 this의 인자들을 차례로 출력한다.

---

map

for문을 돌려서 새로운 배열을 만드는 목적.

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

결과값
1 0 [ 1, 2, 3 ] [ 10 ]
2 1 [ 1, 2, 3 ] [ 10 ]
3 2 [ 1, 2, 3 ] [ 10 ]
[ 11, 12, 13 ]

• v는 a의 요소들을 차례로 받는다.
• i는 index로 0부터 시작한다.
• 여기서 this는 [10]이므로 this[0]을 꼭 붙여준다.

---

reduce

for문을 돌려서 최종적으로 다른 무언가를 만드는 목적.

arr.reduce(callback[, initialValue])

• initialValue: 초기값, 생략시 첫번째 인자가 자동지정, 이 경우 currentvalue는 두번째 인자부터 배정된다.
• callback

  function(accumulator, currentValue[, currnetIndex[, originalArray]])

  • accumulator: 누적된 계산값
  • currentValue: 현재값
  • currentIndex: 현재 인덱스
  • originalArray: 원본 배열

예시1 초기값을 설정한 경우

const arr = [ 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
16

• 초기값 10

1. 누적값: 10
   10 + 1(p) -> 11
2. 누적값: 11
   11 + 2(p) -> 13
3. 누적값: 13
   13 + 3(p) -> 16

-> 10 + 1 + 2 + 3

예시2 초기값을 설정하지 않은 경우

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

console.log(res);

결과값
1 2 1
3 3 2
6

• 초기값을 설정하지 않아 첫번째 p가 초기값이 된다.
  초기값: 1

• c(currentValue)는 두번째인자인 2부터 돈다.

• 초기값: 1

1. 누적값: 1
   1 + 2(p) = 3
2. 누적값: 3
   3 + 3(p) = 6

-> 1 + 2 + 3