filter 함수를 구현해보자 - JS ES6+ 함수형 프로그래밍 - 14

본 시리즈는 인프런 강의 함수형 프로그래밍과 JavaScript ES6+ ( 지식 공유자 : 유인동 님 ) 의 강의를 수강하면서 내용을 제 방식대로 포스팅하는 글입니다.

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

 

Array.prototype.filter() 함수는 어떠한 데이터가 구성되어 있다고 했을때, 주어지는 조건문에 따라 특정 값 이상 또는 이하의 값을 걸러내는 함수이다.

이 filter 함수를 for...of 문으로 구현해본다고 하면,

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

let under20000 = [];
for (const p of products2) {
  if (p.price < 20000) under20000.push(p);
}
console.log(...under20000); // {name: '반팔티', price: 15000} {name: '핸드폰케이스', price: 15000}

// 이 상태에서 다른 조건의 값을 걸러내야하면 어떻게 해야할까?
// 코드를 복사해서 if 문 내의 조건을 변경해야한다.

let over20000 = [];
for (const p of products2) {
  if (p.price >= 20000) over20000.push(p);
}
console.log(...over20000); // {name: '긴팔티', price: 20000} {name: '후드티', price: 30000} {name: '바지', price: 25000}

위와 같이 될것이다.

이 코드를 이제 filter 라는 함수로 직접 구현해보자

조건문을 실행할 보조 함수와 데이터를 순회할 이터러블을 함수의 인자로 받아온다.

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

console.log(...filter((p) => p.price < 20000, products2)); // {name: '반팔티', price: 15000} {name: '핸드폰케이스', price: 15000}
console.log(...filter((p) => p.price >= 20000, products2)); // {name: '긴팔티', price: 20000} {name: '후드티', price: 30000} {name: '바지', price: 25000}

이 filter 함수 역시 내부의 값이 key-value 쌍으로 고정되어있는 객체가 아닌, 다른 이터러블 값을 넣어도 잘 작동 한다.

// 내부의 값의 다형성은 보조 함수에 의해서 지원 해준다.
// 외부의 경우는 이터러블 프로토콜을 따르는것으로 다형성을 지원 해줄수 있다.
// 따라서 많은 것들을 걸러낼수 있는 함수가 된다.
console.log(filter((n) => n % 2, [1, 2, 3, 4])); // [1, 3]
console.log(
  filter(
    (n) => n % 2,
    (function* () {
      yield 1;
      yield 2;
      yield 3;
      yield 4;
      yield 5;
    })()
  )
); // [1, 3, 5]