회원목록, map, 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(temp_users);

2. 30세 이상인 users의 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);

1,2의 경우, 조건부만 다르고 코드는 거의 같다.

_filter, _map으로 리팩토링

직접 변경하지 않고 새로운 값을 리턴하는 식의 함수를 만든다.

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

users[i]를 완전히 위임하는 방법을 사용한다.

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

predi = predicate . function
_filter와 같은 함수를 응용형 함수, 적응형 함수라고 한다.
함수를 인자로 받아서 원하는 시점에 해당함수가 알고 있는 인자를 적용하는 식으로 만드는 것이 응용형 함수, 응용형 프로그래밍, 적응형 프로그래밍 이라고 한다.
고차함수라고 부르기도 함.

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

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

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

위 함수의 경우, mpper함수로 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);

이...코드를 더 ... 간략하게? 사용할 수 있음.

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

보다 안정성 높고 테스트가 쉬운 코드이다. 위처럼 여러줄에 나눠 쓰면 중간에 값이 튈 가능성이 있는데 이 가능성을 차단해준다.