Javascript - Array의 map, reduce, forEach, filter 메소드

 

array.map()

- 배열(array)내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 가진 새로운 배열을 만들어냄

- 쉽게 말해, 맵 메서드로 맵핑해준다(매개변수로 함수가 들어가면 callback이라 함)

let numbers = [1, 4, 9]
let roots = numbers.map(function(num){
  return Math.squrt(num)
})

//roots = [1, 2, 3]
//numbers = [1, 4, 9]

 

 

array.reduce()

- 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고 하나의 결과값 반환

- 배열 축소의 원리로 작용. 즉 여러개의 값이 담긴 배열이 줄어서 최종적으로 하나의 값으로 만드는 과정

[0,1,2,3,4].reduce(function(acc,cur){
  return acc+cur
}); //return 10

 

화살표 함수로도 작성 가능

[0,1,2,3,4].reduce((prev, cur => prev + cur))

var flattended = [[0,1], [2,3], [4,5]]
function (acc, crr) {
  return acc.concat(crr)
}, []);

// return [0,1,2,3,4,5]

 

 

array.forEach()

- 주어진 함수를 한번씩 각각의 array 요소들에게 실행(for loop)

let array1= ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
//expected output:'a'
//expected output:'b'
//expected output:'c'

 

 

array.filter()

- 주어진 function에 속한 조건을 통과한 요소들을 새로운 배열로 반환

function isBigEnough(value){
  return value >= 10
}

let filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
//filtered is [12, 130, 44]

 

 

JS Array의 map, reduce, forEach, filter 모든 메서드는 모두 사본을 반환하며 원래의 배열은 바뀌지 않음