.map .filter .reduce

.map()

.map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

Array.prototype.map() - JavaScript | MDN

arr.map(callback(currentValue[ ,index [, array]]) [,thisArg])

예제는 다음과 같다.

const person = [{name:'person1', age:24},{name:'person2', age:29}]
const names = person.map(x => x.name);
console.log(names)

['person1', 'person2'] names

콜백 함수는 각 요소에서 호출 될 때, 요소 자체와 요소 인덱스, 배열 전체를 매개변수로 받음

 

.reduce()

.reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환

Array.prototype.reduce() - JavaScript | MDN

arr.reduce(callback[, initialValue])

reduce에 callback에는 각 "누산기(acc), 현재 값 (cur), 현재 인덱스 (idx), 원본 배열 (src)" 4개의 인자를 갖는다.

 

예제는 다음과 같다.

const arr = [1,2,3,4,5];
const reducer = arr.reduce((acc, cur)=>{
	return acc+cur;
})

console.log(reducer)
//15

 

 

초기 값을 줄 때는 다음과 같다.

const arr = [1,2,3,4,5];
const reducer = arr.reduce((acc, cur)=>{
	return acc+cur;
}, 10)
// ↑ 초기 값 10 

console.log(reducer)
//25

 

.filter()

.filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환

arr.map(callback(currentValue[, index[, array]])[, thisArg])

 

예제 

let arr = [1,2,3,4,5,6,7,8,9];
let filter = arr.filter(v=> v >= 5);

filter
//[5, 6, 7, 8, 9]

 

 

 

참고

Array.prototype.reduce() - JavaScript | MDN (mozilla.org)

Array.prototype.filter() - JavaScript | MDN (mozilla.org)

Array.prototype.map() - JavaScript | MDN (mozilla.org)