[javascript]함수형 자바스크립트 실용성 -1

[출처::책] 함수형 자바스크립트
http://book.interpark.com/product/BookDisplay.do?_method=detail&sc.prdNo=272822398&gclid=EAIaIQobChMIi739ieqR7wIVOcEWBR2CgwMxEAQYASABEgLcrvD_BwE

좋은 프로그램의 척도는 사용성, 성능, 확장성,
기획 변경에 대한 대응력, 효율적이고 생산적으로 성공적인 프로그래밍.

 

책에서 설명하고 있는 좋은 프로그램의 척도 이다.

 

프런트단을 코딩하다 보면 내가 과연 코드를 잘 짜고 있는지, 이게 유지보수에 쉬울지 가독성은 어떨지 고민하게 된다.

 

코딩을 가르쳐주셨던 선생님은 현재 문제에 급급한 코딩을 할게 아니라, 후에 유동적으로 덧붙이거나 재사용하거나, 변경하기 쉽게 라이브러리를 만든다 생각하며 구조를 짜는 게 기본적인 이해나 여러 예외처리를 접할 수 있어 경험적으로 굉장히 도움이 된다 하셨다. 이를 항상 생각하면서 코딩을 짜는데 이게 여간 어려운 것이 아니다.

 

높은 모듈화 수준은 생산성을 높이고
오류가 없는 함수들의 조합은 프로그램의 안정성을 만드는
성공적인 프로그래밍의 핵심. 

 

책에서는 filter, map, find 등 메서드 사용 전, 하드코딩으로 함수로 사용하는 방식으로 구조 파악용으로 진행하고 있다.

 

회원 목록 중 여러 명 찾기

1. 기본적인 함수형

/**********************
* 함수와 클로저를 이용한 
* 함수형 자바스크립트 스타일
**********************/

function addMaker(a){
    return function(b){
    	return a + b;   
    }
}

addMaker(10)     //function(b){return a + b;}
addMaker(10)(5); //15

var add5 = addMaker(5);
add5(3) //8
add5(6) //11

var add7 = addMaker(7);
add7(3)  //10
add7(10) //17

 

2. 실무에서 적용할 수 있는 함수형

/*******
* 실무적인 코드
*******/
var users = [
    {id:1,name:"ID",age:32},
    {id:2,name:"HA",age:25},
    {id:3,name:"BJ",age:28},
    {id:4,name:"PF",age:32},
]


var temp_users = [];
for(var i=0, len=users.length; i<len; i++){
    if(users[i].age<30) temp_users.push(users[i])
}
console.log(temp_users) //(2)[{...},{...}] , temp_users.length = 2;


// 위코드를 함수형으로 변경

/*
* filter
*/
function filter(list, predicate){
    var new_list = [];
    for(var i=0,len=list.length; i<len; i++){
    	if(predicate(list[i])) new_list.push(list[i]);
    }
    return new_list;
}
var users_under_30 = filter(users,function(user){return user.age < 30});
console.log(users_under_30.length) //2

var ages = [];
for(var i=0,len = users_under_30.length;i<len;i++){
    ages.push(users_under_30[i].age);	
}
console.log(ages) //(2) [25, 28]

 

- 절차 지향 프로그래밍은 위에서 아래로 내려가면서 특정 변수의 값을 변경해 나가는 식으로 로직을 만들고,

- 객체지향 프로그래밍은 객체들을 만들어 놓고 객체들 간의 협업을 통해 로직을 만든다.

- 함수형 프로그래밍에서는 항상 동일하게 동작하는 함수들을 만들고 보조 함수를 조합하는 식으로 로직을 완성한다.

 

 

/*
* map
*/
function map(list, iteratee){
    var new_list = [];
    for(var i =0,len=list.length;i<len;i++){
        new_list.push(iteratee(list[i]));
    }
    return new_list;
}

var users_under_30 = filter(users,function(user){return user.age > 30});
console.log(users_under_30) //(2) [{…}, {…}]


var ages = map(
   filter(users,function(user){return user.age > 30}),
   function(user){return user.age;}
)
console.log(ages) //(2) [32, 32]


function log_length(val){
    console.log(val.length);
    return val;
}
console.log(log_length(
   map(
      filter(users,function(user){return user.age < 30}),
      function(user){return user.age;}
   )
)) 
// 2             -->log_length함수안 콘솔값
// (2) [25, 28]  -->맨마지막 콘솔값

/*
* 함수를 리턴하는 함수 bvalue
*/
function bvalue(key){
   return function(obj){
      return obj[key];
   }
}

console.log(log_length(
   map(
      filter(users,function(user){return user.age < 30}),
      bvalue('age')
   )
))  // (2) [25, 28]

console.log(log_length(
   map(
      filter(users,function(user){return user.age < 30}),
      bvalue('name')
   )
))  // (2) ["HA", "BJ"]

 

 

>> 위 코드 통합본

See the Pen eYBojQa by JNoony (@jnoony) on CodePen.