About filter

이번에는 filter에 대해서 다뤄보자.

필터는 아래와 같이 데이터가 구성되어져 있을 때 특정 금액 이상의 상품만 걸러낸다거나 특정 금액 이하의 상품만 걸러낸다거나 하는 식의 코드이다. 

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

아래의 코드가 있다.

	let under20000 = [];
	for (const p of products) {
	    if (p.price < 20000) under20000.push(p);
	}
	log(...under20000);


	let over20000 = [];
	for (const p of products) {
	    if (p.price >= 20000) over20000.push(p);
	}
	log(...over20000);
    
    =>
    
{name: "반팔티", price: 15000}name: "반팔티"price: 15000[[Prototype]]: Object {name: "핸드폰케이스", price: 15000}
{name: "긴팔티", price: 20000}name: "긴팔티"price: 20000[[Prototype]]: Object {name: "후드티", price: 30000} {name: "바지", price: 25000}

filter로 리팩토링을 해보면 리턴하는 값은 부수효과로(ex) log(...under20000); 출력을 하는 것이 아니라 함수의 return값으로 출력을 해주고 iter을 넣어주어서 이터러블 프로토콜을 따르도록 해준다.

그리고 보조함수(f)에게 위임(f(a))하는 식으로 해준다.

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

log(...filter(p => p.price < 20000, products));
log(...filter(p => p.price >= 20000, products));

내부에 있는 다양성은 보조함수를 통해서 걸러낼 수 있다. 아래코드를 보자.

log(filter(n => n % 2, [1, 2, 3, 4]));

=>

[1, 3]

외부에 경우는 이터러블 프로토콜을 따르는 것을 통해서 다양성을 지원해줄 수 있다. 즉 filter 역시 많은 것을 걸러낼 수 있다.

필터를 하는데 제너레이터 함수를 실행해서 아래와 같이해주고 확인을 해보면 [1, 3, 5]가 나오는 것을 볼 수 있다.

log(filter(n => n % 2, function* () {
	yield 1;
	yield 2;
	yield 3;
	yield 4;
	yield 5;
}()));


=>

 [1, 3, 5]

filter함수 역시 이터러블 프로토콜을 따르고 함수형적인 코딩을 통해서 구현해서 중복을 제거해보았다.

 

<출처 : 유인동 함수형 프로그래밍과 JavaScript ES6+>

https://www.inflearn.com/course/functional-es6/dashboard

함수형 프로그래밍과 JavaScript ES6+ - 인프런 | 강의