[javascript]함수형 자바스크립트 프로그래밍

그동안 주로 봐왔던 자바스크립트 코드들은 객체지향적인 코드였기때문에 함수형 자바스크립트는 어떤 모양일까 에 대해 궁금했었고, 우연히 이 책을 만나게 되어 읽고 정리를 하게됐다.

책에서 디테일하게 코드를 파고들어 연구하기 보다는, 함수형 프로그래밍의 전체적인 패턴을 이해하는데 중점을 두고 싶다. 

 

* 첫 인상은 그동안 봐왔었던 js코드 패턴과 달랐기 때문에 이해하기 어렵다는 생각이 들었지만. 예제를 분석하면 할수록 '아름답다' 라는 느낌을 받았다. 아름답고 영리한 화풍이다.

 

고차함수

고차함수란, 함수를 인자로 받거나 함수를 리턴하는 함수를 말한다.

보통 고차함수는 함수를 인자로 받아 필요한 때에 실행하거나 클로저를 만들어 리턴한다.

 

//Underscore.js의 함수들 Underscore.js는 유명한 함수형 자바스크립트 라이브러리다.

_.map = function(list, iteratee){
	var new_list = [];
    for (var i = 0, len = list.length; i < len; i++){
    	new_list.push(iteratee(list[i], i, list));
    }
    return new_list;
};
_.filter = function(list, predicate){
	var new_list = [];
    for(var i = 0, len = list.length; i < len; i++){
    	if(predicate(list[i], i, list)) new_list.push(list[i]);
    }
    return new_list;
};
_.find = function(list, predicate){
	var new_list = [];
    for(var i = 0, len = list.length; i < len; i++){
    	if(predicate(list[i], i, list)) return list[i];
    }
};
_.finedIndex = function(list, predicate){
	for(var i = 0, len = list.length; i < len; i++){
    	if(predicate(list[i], i, list)) return i;
    }
    return -1;
}

//사용 예

// filter함수를 이용해서 list에서 index 2부터 끝까지 요소를 새로운 배열에 담아서 반환한다. 

console.log(_.filter([1, 2, 3, 4], function(val, idx){ return idx > 1;}))

// filter 함수를 이용해서 list에서 짝수번 index요소들을 새로운 배열에 담아서 반환한다.

console.log(_.filter([1, 2, 3, 4], function(val, idx){
	return idx % 2 == 0;
}))

함수를 조합하여 유용한 함수를 만들 수 있다.

//받은 값을 그대로 반환하는 함수
_.identify = function(v) { return v;};

//filter 함수와 함께 쓰면 Truthy Value(true 값)만 남는다.
// Falsy Values : false, undefined, null, 0, Nan, ""

console.log(_.filter([true, 0, 10, 'a', false, null], _.identify));
// [true, 10, 'a']

함수형 자바스크립트를 위한 기초

함수를 다루는 다양한 방법들을 잘 익히는 것이 중요하다. 함수를 잘 다루려면 함수와 관련된 개념들과 관련된 몇가지 기능들에 대해 잘 알아야 한다.

- 일급 함수, 클로저, 고차함수, 콜백 패턴, 부분 적용, arguments 객체 다루기, 함수 객체의 메서드(bind, call, apply)

 

일급함수

일급은 값을 다룰 수 있다는 의미로 아래와 같은 조건을 만족해야 한다.

- 변수에 담을 수 있다 / 함수나 메서드의 인자로 넘길 수 있다 / 함수나 메서드에서 리턴할 수 있다.

자바스크립트에서 모든 값은 일급이다. 일급 함수는 아래와 같은 조건을 만족해야 한다.

- 아무 때나(런타임에서도) 선언이 가능하다. / 익명으로 선언할 수 있다. / 익명으로 선언한 함수도 함수나 메서드의 인자로 넘길 수 있다.

 

클로저

클로저는 자신이 생성될 때의 스코프에서 알 수 있었던 변수 중 언젠가 자신이 실행될 때 사용 할 변수들만 기억하여 유지시키는 함수다. 클로저가 기억하는 변수의 값은 언제든지 남이나 자신에 의해 변경될 수 있다.

function f6() {
	var a = 10;
    
    //진짜 클로저 a는 사라지지 않는다.
    //f8을 실행할 때마다 새로운 변수인 b와 함께 사용되어 결과를 만든다.
    function f7(b){
    	return a + b;
    }
    return f7;
}
var f8 = f6();
f8(20);
//30
f8(10);
//20

function f9(){
	var a = 10;
    var f10 = function(c){
    	return a + b + c;
    };
    var b = 20;
    return f10;
}
var f11 = f9();
f11(30); // 60

클로저의 실용 사례

클로저가 정말로 강력하고 실용적인 상황

- 이전 상황을 나중에 일어날 상황과 이어나갈때

- 함수로 함수를 만들거나 부분 적용을 할 때

 

-이전 상황을 나중에 일어날 상황과 이어나갈 때

// 이벤트 리스너로 함수를 넘기기 이전에 알 수 있던 상황들을
// 변수에 담아 클로저로 만들어 기억해두면, 이벤트가 발생되어 클로저가 실행되었을 때
// 기억해 두었던 변수들로 이전 상황을 이어갈 수 있다.

// 콜백 패턴에서도 마찬가지로 콜백으로 함수를 넘기기 이전 상황을 
// 클로저로 만들어 기억해 두는 식으로 이전의 상황들을 이어갈 수 있다.