Javascript ES6+ forEach, map, reduce 메소드

 

forEach, map, reduce 메소드

 

 

 

 

 

forEach

 

 

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

callback : function (currentValue[, index[, originalArray]])
currentValue : 현재값

index : 현재 인덱스
originalArray : 원본 배열
thisArg : this에 할당할 대상. 생략시 global객체

 

 

for문을 돌리는 것이랑 같은 개념이다.

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]

 

 

 

 

 

 

 

map

 

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

 

callback : function (currentValue[, index[, originalArray]])

currentValue : 현재값
index : 현재 인덱스
originalArray : 원본 배열

thisArg : this에 할당할 대상. 생략시 global객체

 

 

for문을 돌려서 새로운 배열을 만들어 내는 것이며 return이 꼭 들어가야 한다.

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]

console.log(b)
// b의 결과 : [11, 12, 13]

 

 

 

 

 

 

 

 

 

reduce

 

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

 

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

 

 

for문을 돌려 최종적으로 다른 무언가를 만드는 것이 목표이며, return이 꼭 들어가야 한다.

 

 

initialValue가 있는 경우

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 [1, 2, 3]
//11 2 1 [1, 2, 3] 
//13 3 2 [1, 2, 3]

//res 결과:
//16

 

 

initialValue가 없는 경우

const arr = [ 10, 20, 30, 40, 50 ]
const r = arr.reduce(function (p, c) {
  return p + c
})
console.log(r)

//결과:
//150

 

 

 

 

배열을 문자열로 바꾼다.

즉 새로운 무언가를 만든다는 것이다. ''대신 {}넣으면 객체로 만들 수 있다. 

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

//결과:
//1234

 

 

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

//결과:
//{1: Array(1), 2: Array(1), 3: Array(1), 4: Array(1)}
//1: [1]
//2: [2]
//3: [3]
//4: [4]