자바스크립트- forEach, map, reduce

참고자료: 인프런 자바스크립트 초급강의

Javascript ES6+ 제대로 알아보기 - 초급 - 인프런 | 강의

 

1. forEach

array.prototype.forEach : for문을 쉽게 만든 버전 (return 필수 x)

forEach: (callback [, this Arg])

callback 이란? function인데 (currentValue, index, original Array)를 담는 함수

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 ]

v는 a의 벨류, i는 인덱스, arr은 마지막에 온 배열들

 

2. map

: for문을 돌려서 새로운 배열을 만든다 (return 필수)

array.prototype.map(callback[, initialValue])

callback: function(누적된 계산값, 현재값, [현재인덱스, 원본 배열])

const a = [ 1, 2, 3 ]
const b = a.map(function (v, i, arr) {
    console.log(v, i, arr, this) //this는 [10]
    return this[0] + v //새로운 배열을 리턴
}, [ 10 ])

//결과
b: [11,12,13]

 

 

3. reduce

:for문을 돌려서 새로운 다른 무언가를 만든다(return 필수)

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

//결과
10 1 0 => (3) [1,2,3]
11 2 1 => (3) [1,2,3]
13 3 2 => (3) [1,2,3]

 

p: 누적된 값, c는 현재값, i는 인덱스, arr는 현재 배열 this는 다음에 나올 배열

1. p는 현재 값 10으로 시작해 arr배열에 있는 1을 들고 옴 (그다음은 인덱스, 원본배열이니 생략)

2. 그리고 다음줄은 10+1이니 11, arr 두번째 값 2 들고오기

이런식으로 최종결과 값은 13+3이니 16이 될 것임

 

- 다음 예시 1

const arr = [ 1, 2, 3, 4 ]
const str = arr.reduce(function (res, item, index, array) {
  return res + item
}, '')
console.log(str)

//result
1 2 0
3 3 1

res 값은 누적된 값이 들어오는데 다음 배열이 없기 때문에 arr의 0번째 인덱스 들고오고 계산해줌

최종 결과는 3+3으로 6!

 

-다음 예시 2 :누적값 구하기

//reduce 함수로 누적값 구하기
const arr = [ 10, 20, 30, 40, 50 ]
const r = arr.reduce(function (p, c) {
  return p + c
})
console.log(r)

//결과 - 150

//짧은 버전
const arr = [ 10, 20, 30, 40, 50 ]
const r = arr.reduce((p, c) => p + c)
console.log(r)

-예시 3: 

//문자열 누적되게 결과 값 나오게 하기
const arr = [ 'a', 'b', 'c', 'd' ]
const str = arr.reduce(function (res, item, index, array) {
  return res + item
})
console.log(str)

//결과 
1 | 'a' | 'b' | 1 | ['a','b','c','d']
2 | 'ab' | 'c' | 2 | ['a','b','c','d']
3 | 'abc' | 'd' | 3 | ['a','b','c','d']

'a'

'ab'

'abc' 나오는 걸 볼 수 있음