Map? Filter? Reduce?

Map, Filter, Reduce 모두 ES6에서 추가된 메서드입니다.
모두 배열에서 사용을하며 각 요소들을 파라미터로 받아 작동 합니다.

Map

map은 배열의 각 요소에 대하여 주어진 함수를 수행한 결과를 모아 새로운 배열을 반환합니다.
예를 들어 배열에서 각 요소의 제곱 값을 가진 배열을 구하는 기능을 구현한다고 하면 다음과 같이 작성할 수 있습니다.

const numbers = [1, 2, 3, 4, 5]

const squared = numbers.map((x) => x*x)

Filter

filter는 배열의 각 요소에 대하여 주어진 함수의 결괏값이 true인 요소를 모아 새로운 배열을 반환합니다.
예를 들어 배열에서 3 이상의 숫자를 걸러내는 기능을 구현한다고 하면 다음과 같이 작성할 수 있습니다.

const numbers = [1, 2, 3, 4, 5]

const moreThenThree = numbers.filter((x) => x >= 3)

Reduce

reduce는 map, filter와 달리 배열의 각 요소에 대하여 reducer 함수를 실행하고 하나의 결괏값을 반환한다는 차이점이 있습니다.
배열에서 모든 숫자의 합을 구하고 싶다면 다음과 같이 작성을 할 수 있습니다.

const numbers= [1, 2, 3, 4, 5]

const arraySum = numbers.reduce((acc, cur) => {
	return acc + cur
})

reduce를 사용해 보시지 않았다면 acc, cur이 무슨 의미인지 잘 모르실텐데요 reduce는 4가지의 파라미터를 받습니다.

• acc(accumulator): 콜백의 반환 값
• cur(currentValue): 처리할 현재 요소
• index(currentIndex): 처리할 요소의 인덱스
• array: reduce를 호출 한 배열

이 외에도 reduce함수를 이용해 객체를 만들고 싶으시다면 acc의 초기 값을 지정을 해주면 가능합니다.
reduce를 이용해 하나의 객체에 배열의 합, 배열의 곱을 저장하는 기능을 만들고 싶으시다면 다음과 같이 작성할 수 있습니다.

const numbers = [1, 2, 3, 4, 5]

const { sum, mul } = numbers.reduce((acc, cur) => {
	acc.sum += cur
  	acc.mul *= cur
  	
  	return acc
}, {sum: 0, mul: 0})