JS 함수형 프로그래밍 _map, _filter 함수 만들어보기

1. 함수형 프로그래밍이란?

자료 처리를 수학적 함수의 계산으로 취급하고 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임의 하나이다. 명령형 프로그래밍에서는 상태를 바꾸는 것을 강조하는 것과는 달리, 함수형 프로그래밍은 함수의 응용이 강조된다.

다형성을 높이고 부수 효과를 최소화 하는 순수 함수를 만들어 모듈화 수준을 높이는 프로그래밍 패러다임

 

순수 함수 : 부수효과가 없는 함수 즉, 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수. 
               외부의 상태를 변경하지 않는 함수.

 

※ 함수형 프로그래밍은 계산량이 많을수록 더 나은 성능을 보여준다.

---

2. each 함수 만들기

map함수와 filter함수의 매개변수로 iterable list(data)와 콜백 함수를 받아서 각 요소별로 실행해줄 함수인 _each 함수를 작성해야 합니다. 왜냐하면 map과 filter 속 배열만큼 반복하는 코드를 함수로 만들어 중복을 피하고 함수에 함수를 응요하여 더 간결하게 작성할 수 있습니다.

  _each 함수

function _each(list, iter) { // iterable data와 callback 함수
  for (let i = 0; i < list.length; i++) {
    // 배열 요소별로 callback 함수 실행
    iter(list[i]);
  }
  return list;
}

---

3. 함수형 filter 함수 만들기

iterable 데이터와 필터 조건 함수를 인자로 받아서 _each 함수를 통해 반복적으로 수행하도록 합니다.

예제 데이터

const users = [
  { id: 1, name: 'Ki', age: 29},
  { id: 2, name: 'MA', age: 32},
  { id: 3, name: 'UJ', age: 36},
  { id: 4, name: 'IS', age: 24},
  { id: 5, name: 'PA', age: 30},
  { id: 6, name: 'QA', age: 27},
  { id: 7, name: 'RI', age: 40},
  { id: 8, name: 'ME', age: 22},
  { id: 9, name: 'CH', age: 37},
];

자바스크립트 filter 함수

console.log(
  users.filter((user) => user.age >= 30)
);
//[
//  { id: 2, name: 'MA', age: 32 },
//  { id: 3, name: 'UJ', age: 36 },
//  { id: 5, name: 'PA', age: 30 },
//  { id: 7, name: 'RI', age: 40 },
//  { id: 9, name: 'CH', age: 37 }
//] 

함수형 _filter 함수

function _filter(list, predi) { // iterable data와 filter 조건함수
  const new_list = [];
  _each(list, function (val) { // each 함수의 인자로 iterable data와 filter 로직 함수
    if (predi(val)) {
      new_list.push(val);
    }
  });
  return new_list;
}

console.log(
  _filter(users, function (user) {
    return user.age >= 30;
  })
);
//[
//  { id: 2, name: 'MA', age: 32 },
//  { id: 3, name: 'UJ', age: 36 },
//  { id: 5, name: 'PA', age: 30 },
//  { id: 7, name: 'RI', age: 40 },
//  { id: 9, name: 'CH', age: 37 }
//] 

---

4. 함수형 map 함수 만들기

iterable 데이터와 콜백 함수를 인자로 받아서 _each 함수를 통해 반복적으로 수행하도록 합니다.

자바스크립트 map 함수

console.log(
  [1, 2, 3, 4].map((num) => num * 2)
); 
// [2, 4, 6, 8]

함수형 _map 함수

function _map(list, mapper) { // iterable data와 callback 함수
  const new_list = [];
  _each(list, function (val) { // // iterable data와 map 로직 함수
    new_list.push(mapper(val));
  });
  return new_list;
}

console.log(
  _map([1,2,3,4], function(num) { return num * 2; })
);
// [2, 4, 6, 8]

---

5. 성능 이야기

성능이 궁금해서 lodash의 filter와 map 함수를 테스트 해보았습니다.

const _ = require('./core');

const array = [];

for (let i = 0; i < 5000000; i++) {
  array[i] = i;
}

console.time('javascript');
const result = array.filter((x) => x % 2 === 0)
                    .map((x) => x * 10)
                    .reduce((acc, cur) => acc + cur);
console.log(result);
console.timeEnd('javascript');

console.time('lodash');
const result2 = _.chain(array)
                 .filter((x) => x % 2 === 0)
                 .map((x) => x * 10)
                 .reduce((acc, cur) => acc + cur)
                 .value();
console.log(result2);
console.timeEnd('lodash');

500만개와 1000만개의 배열  연산 결과

5만개의 배열 연산 결과

---

6. 결론

위의 결과로 함수형 프로그래밍이 성능에 무조건 좋다는 생각은 절대 아니다. 왜냐하면
객체지향 프로그래밍은 객체를 모델링 -> 메서드 작성 순서로 데이터를 중점으로 이루어진다. 하지만
함수형 프로그래밍은 함수를 작성하고 범용적인 데이터를 처리한다. 선언적이고 함수 중심이다. 즉
모델링 된 데이터를 처리할 때는 객체지향 프로그래밍을 이용하면 되고, 어떤 데이터를 기능 중심으로 처리할 때는 함수형 프로그래밍을 이용하면 된다.

 

요즘 백엔드-프런트엔드 구조에서 대부분의 데이터를 프런트엔드에서 처리하고 한 번에 데이터를 넘겨주는 그래프 QL 같은 방식도 나오고 있기 때문에 함수형 프로그래밍의 인기도 달궈지고 있는 것 같다.

 

※ 아직 부족하고 틀린 정보일 수 있습니다. 읽어주셔서 감사합니다.

---

참고.

https://ko.wikipedia.org/wiki/%ED%95%A8%EC%88%98%ED%98%95_%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D

함수형 프로그래밍 - 위키백과, 우리 모두의 백과사전