명령형에서 함수형으로 전환하기

const 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를 거른다.
const temp_users = [];
for (let i = 0; i < users.length; i++) {
  if (users[i].age >= 30) {
    temp_users.push(users[i]);
  }
}
console.log(temp_users);

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

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

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

함수형 코드

// 1. 30세 이상인 users를 거른다.
const over_30 = users.filter(({age}) => age >= 30);
console.log(over_30);

// 2. 30세 이상인 users의 names를 수집한다.
const names = over_30.map(({name}) => name);
console.log(names);

// 3. 30세 미만인 users를 거른다.
const under_30 = users.filter(({age}) => age < 30);
console.log(under_30);

// 4. 30세 미만인 users의 ages를 수집한다.
const ages = under_30.map(({age}) => age)
console.log(ages);

응용형 함수는 인자로 받은 함수가 알고 있는 인자를 해당 함수에게 평가받아 로직을 완성해나가는 것을 말합니다. map, filter 와 같은 함수가 응용형 함수라고 합니다. 어떠한 데이터 형태인지 관심이 분리가 되고 다형성을 사용할 수 있기 때문에 재사용성이 높아집니다.

const filter = (collection, predicate) => {
  return Array.from(collection).filter(predicate);
};
const map = (collection, mapper) => {
  return Array.from(collection).map(mapper);
}

console.log(filter('123', (str) => Number(str) > 1));
console.log(filter([1,2,2], (str) => Number(str) > 1));