명령형 코드

<script>
var users = [
  { id: 1, name: 'ID', age: 36 },
  { id: 2, name: 'BJ', age: 32 },
  { id: 3, name: 'JM', age: 32 },
  { id: 4, name: 'PJ', age: 27 },
  { id: 5, name: 'HA', age: 25 },
  { id: 6, name: 'JE', age: 26 },
  { id: 7, name: 'JI', age: 31 },
  { id: 8, name: 'MP', age: 23 }
];

30세 이상인 users를 거르는 코드를 만들어 보자.

var temp_users = [];
for (var i = 0; i < users.length; i++) {
  if (users[i].age >= 30) {
    temp_users.push(users[i]);
  }
}

함수형 코드로 바꾸기 시작!

1. filter라는 함수를 만든다.

function _filter(){
  var new_list = [];
  for (var i = 0; i < users.length; i++) {
     if (users[i].age >= 30) {
        new_list.push(users[i]);
  }
}
console.log(new_list);
}

• temp_users를 new_list로 바꿔주었다.
• 함수형 프로그래밍에서는 값을 직접 변경하지 않고 새로운 값을 리턴하는 식으로 값을 변형해나간다.
• 즉, 해당하는 값에 배열을 직접 필터링하는 것이 아니라 필터가 된 새로운 값을 만드는 것이다. ➡️ 이러한 의미를 담아 new_list라고 이름을 수정해주자.

2. 부수 효과를 없앤다.

function _filter(){
  var new_list = [];
  for (var i = 0; i < users.length; i++) {
     if (users[i].age >= 30) {
        new_list.push(users[i]);
  }
}
  return new_list;
}

• console.log(new_list)는 외부 세계에 영향을 주는 부수 효과이다.
• 부수효과를 없애고 return으로 바꾸어주자.

3. 응용형 함수

function _filter(users, predi){
  var new_list = [];
  for (var i = 0; i < users.length; i++) {
     if (predi(users[i])) {
        new_list.push(users[i]);
  }
}
  return new_list;
}

• filter함수는 users를 받아야 하므로 filter(users)로 바꾸어주었다.
• 중복되는 부분은 if (users[i].age >= 30) {이다.
• 함수형 프로그래밍에서는 중복을 제거하거나, 부분을 추상화할 때 함수를 사용한다.
• 추상화의 단위는 객체/메서드/클래스가 아니다.
• 추상화의 단위를 함수를 이용해서 프로그래밍하는 것이다.
• 어떤 조건을 만족할 때 필터링할 것인지를 함수에게 완전히 위임한다.
• predi라는 함수를 만들어주자.
• predi는 if문 안쪽에서 실행되며 user들을 하나씩 넘기며 실행된다.

응용형 함수
여기서 filter와 같은 함수를 응용형 함수(또는 적용형 프로그래밍)라고 한다.
응용형 함수란, 함수가 함수를 받아서 원하는 시점에 해당하는 함수가 알고있는 인자를 적용하는 식으로 프로그래밍된다. 즉, 함수가 함수를 인자로 받아서 원하는 시점에 평가를 하며 이 함수에서 알고 있는 특정한 인자를 적용해 나가면서 로직을 완성한다.

고차함수
또한 filter는 고차함수이기도 하다. 고차함수는 함수를 인자로 받거나, 함수를 리턴하거나, 함수 안에서 함수를 인자로 받은 함수를 실행하는 함수를 말한다.

잘 작동되는지 확인해보자.

console.log(
  _filter(users, function(user) {return user.age >= 30;}));

4. 재활용성

filter는 users만을 위한 것이 아니다.

console.log(_filter([1, 2, 3, 4], function(num) {return num % 2;}));

• 어떤 값이 배열에 들어있든 걸러낼 수 있다.
• 또 다른 순수함수를 보조함수로 (predicate)함수로 넘겨준다.
• 어떤 값이 배열에 들어있든 걸러낼 수 있다.
• users일 필요가 없다. list로 바궈준다.

function _filter(list, predi){
  var new_list = [];
  for (var i = 0; i < list.length; i++) {
     if (predi(list[i])) {
        new_list.push(list[i]);
  }
}
  return new_list;
}

https://www.inflearn.com/course/%ED%95%A8%EC%88%98%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/dashboard