섹션 2. 함수형으로 전환하기 (_filter 함수, _map 함수)

섹션 2. 함수형으로 전환하기 - filter 함수 부분 내용 정리 (https://www.inflearn.com/course-status-2/ )

_filter 함수로 함수 줄이기

다음의 명령형 코드가 있습니다.

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 }
];

// 1. 30세 이상인 users를 거른다.
var temp_users= [];
for (var i=0; i < users.length; i++){
    if(users[i].age >= 30){
        temp_users.push(users[i]);
    }
}
console.log(tem_users);

// 3. 30세 미만인 users를 거른다.
var temp_users = [];
for (var i = 0; i < users.length; i++) {
  if (users[i].age < 30) {
    temp_users.push(users[i]);
  }
}
console.log(temp_users);

위에 코드에서 30세 이상인 user 를 거르는 코드와 30세 미만인 user를 거르는 코드를 보면  if문 에서 >=, < 만 제외 하고 다 동일 함.

위에 코드를 _filter 함수로 줄이면 다음과 같이 줄 일 수 있다.

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

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

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

위에 _filter 함수는 직접 해당 하는 값에 해당 하는 배열을 직접 필터링 하는 것이 아니고 필터가 된 새로운 값을 만들도록 함

중복되는 if문은 인자로 받은 함수(predi)에 위임 하여 어떤 조건일때 필터링을 하는 방법을 사용.

함수형 프로그래밍에서는 중복을 제거 하거나 어떤 부분을 추상화 할때 함수를 사용 하면 된다.

추상화의 단위를 함수로 하는 것이 함수형 프로그래밍 이다.

_filter 함수는 응용형 함수 이다.

응용형 함수란 함수가 함수를 받아서 원하는 시점에 해당하는 함수가 알고 있는 인자를 적용하 식으로 프로그래밍 하는것(응용형 함수, 응용형 프로그래,적용형 프로그래밍)

_filter 함수 를 고차 함수라고 부르기도 한다.

고차 함수는 함수를 인자로 받거나, 함수를 리턴하거나 함수안에서 인자로 받은 함수를 실행 하는 함수

다용성이 높은 _filter 함수 (users 와 상관 없는 전혀 다른 값들도 필터링 할 수있는 함수가 되었다.)

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

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

_map 함수로 함수 줄이기

이름과 나이를 수집하는 함수 중복 줄이기

// 30세 이상인 users의 names를 수집한다.
var names = [];
for (var i = 0; i < temp_users.length; i++) {
  names.push(temp_users[i].name);
}
console.log(names);  

 // 30세 미만인 users의 ages를 수집한다.
var ages = [];
for (var i = 0; i < temp_users.length; i++) {
  ages.push(temp_users[i].age);
}
console.log(ages);
 

분홍색 바탕의 부분을 제외하고 중복되는 부분을 map 함수로 줄이기

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

mapper  함수를 받아서 무엇을 수집해서 너을 것인지 완전히 위임을 함.  

위에 코드를 보면 데이터 형이 어떻게 생겼는지 보이지 않는데, 이것이 함수형 프로그래밍의 또 다른 특징 중 하나 임

재사용성이 극대화 대는 map 함수가 되었다.

결과

var over_30 = _filter(users, function(user) { return user.age >= 30; });
var names = _map(over_30, function(user) {
  return user.name;
});
console.log(names);