(ES5)자바스크립트에서 명령형 코드를 함수형으로 바꾸기

이토니·2024년 1월 21일
0

JavaScript

목록 보기
9/33
post-thumbnail

30세 이상인 users의 names를 수집한다.

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

명령형 코드

var names = [];
for (var i = 0; i < temp_users.length; i++) {
  names.push(temp_users[i].name);
}
console.log(names);

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

이 전 포스팅의 filter와 동일한 방법으로 작성해준다.

function _map(list, mapper){
  var new_list = [];
  for (var i = 0; i < list.length; i++) {
     new_list.push(mapper(list[i]));
  }
  return new_list;
}
  • 데이터가 어떻게 생겼는지 전혀 보이지 않는다. ➡️ 함수형 프로그래밍의 특징이다.
  • users를 넘기고, users의 크기만큼 루프가 반복된다.
  • 무엇을 new_list에 push할 것인지를 mapper에게 위임한다.

함수를 중첩하기

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);
  • 함수형 프로그래밍에서는 대입문을 많이 사용하지 않는다.
  • 원래 값을 만들어놓고 문장을 내려가면서 변형하는 것이 아니라,
  • 함수를 통과하면서 값을 새롭게 만들어낸다.
  • 대입문을 없애고 함수를 중첩한다.
console.log(
  _map(
    _filter(users, function(user) { return user.age >= 30; }),
    function(user) { return user.name; }));

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

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

profile
cool & soft codes

0개의 댓글