map, filter

devjune·2021년 9월 26일
0

ES5

목록 보기
2/14

응용형 프로그래밍 : 함수를 인자로 받아서 원하는 시점에 평가를 하면서 함수 안에서 알고 있는 인자를 적용해 나가면서 로직을 완성해 나가는 프로그래밍

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. 명령형 코드
  // 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(temp_users);

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

  // 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);

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

위 4가지 함수를 함수형 프로그래밍의 특징 중 하나인 응용형 함수, 컬렉션을 다루는 함수로 만들어 본다.

// 2. _filter, _map으로 리팩토링
function _filter(users) {
  var new_list = [];
  for (var i = 0; i < users.length; i++) {
     if (users[i].age >= 30) {
        new_list.push(users[i]);
     }
  }
  return new_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;
}

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

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

var names = _map(over_30, function(user) { return user.name; });
console.log(names);

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

var ages = _map(under_30, function(user) { return user.age; });
console.log(ages);

함수형 프로그래밍은 함수를 통과해 나가면서 새로운 값을 만들어 나가는 방식.

profile
개발자준

0개의 댓글