JS prototype map, filter, reduce 알아보기

JS로 코딩을 하다 보면 array 내의 element에 접근하기 위해 map, filter, reduce라는 protoype에 정의된 method를 사용하게 된다. 이 함수들이 어떤 역할을 하는지 간략히 정리해 보았다.

map()

배열 내 element에 대하여 주어진 함수를 모아 반환하는 method.

const arr = [1,2,3,4,5];
const newArr = arr.map(ele => ele * 2);

console.log(newArr);

// [2,4,6,8,10]

이 때 map에는 기본적으로 정의된 매개변수인 index와 array가 존재한다.

• index: element의 index
• array: map()을 호출한 배열

filter()

각 element에 대하여 return 값이 true인 경우를 모아 새로운 요소로 반환

const arr = [1,2,3,4,5];
const newArr = arr.filter(ele => ele > 2);

console.log(newArr);

// [3,4,5]

reduce()

array를 받아 하나의 결과값을 반환.

• acc: initialValue가 있을 경우에는 해당값을 초기값으로 하고, 이를 제외하고 callback의 반환값을 누적
• cur: 현재값
• idx: 현재 index
• src: 원본 배열

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

console.log(newArr);

// 1 2
// 3 3
// 6 4
// 10 5
// 10

initialValue 있는 경우

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

console.log(newArr);

// 10 1
// 11 2
// 13 3
// 16 4
// 20 5
// 25

끝

위와 같이 reduce, map, filter와 같은 prototype에 정의된 method를 이용한다면 코드를 더 간결하고 가독성 높게 작성할 수 있다.