[JavaScript] Map + Filter + Reduce 중첩 사용과 함수형 사고

Map, Filter, Reduce 중첩하여 사용

map, filter, reduce 함수를 커스텀으로 생성하고, 이를 중첩하여 사용해봄으로써 함수형 사고에 대해 배우고자 한다.

 

각각의 함수는 아래와 같이 작성할 수 있다.

const map = (f, iter) => {
	const res = [];
	for (const a of iter) {
    	res.push(f(a))
    }
    return res;
};

const filter = (f, iter) => {
	const res = [];
    for (const a of iter) {
    	if (f(a)) res.push(a);
    }
    return res;
};

const reduce = (f, acc, iter) => {
	if (!iter) {
    	iter = acc[Symbol.iterator]();
        acc = iter.next().value;
    }
    for (const a of iter) {
    	acc = f(acc, a);
    }
    return acc;
};

각각의 함수들을 임의로 커스터마이징하여, 기본 골자는 동일하나 호출하여 사용하는 방식은 약간 다르다. 기본적으로 map, filter, reduce보다 조금 더 이터러블 객체에 대해 범용적으로 사용할 수 있다.

const products = [
	{ name: '반팔티', price: 15000 },
    { name: '긴팔티', price: 20000 },
    { name: '핸드폰케이스', price: 15000 },
    { name: '후드티', price: 30000 },
    { name: '바지', price: 25000 },
];

위 함수를 products로 다뤄보며 응용해볼 차례이다.

 

만약 2만원 이상인 것을 찾고 가격만 보고자 한다면 다음과 같이 작성할 수 있다.

map(p => p.price, filter(p => p.price < 20000, prducts)));

여기서 나아가 이들을 모두 더하고 싶다면 아래와 같이 reduce를 사용할 수 있다.

const add = (a, b) => a + b;

reduce(add, map(p => p.price, filter(p => p.price < 20000, products))));

함수형 프로그래밍에서 함수를 중첩해 하나의 결과를 도출해나가는 식으로 값을 찾아낼 수 있다.

 

함수형 프로그래밍에서 함수를 사용할 때, reduce의 경우 두 번째 인자로 정수형 리스트가 오는 것을 기대할 수 있다. 그러면, 우리가 인자 값을 집어 넣을 때 정수형들이 담기도록 값을 전달해야 한다는 것을 알고 있으므로, map 함수를 통해 정수형 리스트를 인자로 전달할 수 있다. 이렇게 reduce는 정상적으로 동작한다.

 

즉, 함수의 인자로 어떤 값이 올 지 기대하면서, 해당 값을 평가할 수 있는 표현식을 사용하거나 혹은 함수를 사용해 원하는 값을 도출하도록 하는 것이다. 코드를 값으로 다루는 것이다.

 

---

출처: 함수형 프로그래밍과 JavaScript ES6+