함수 지향 - 클로저

클로저(Closure)란?

• 내부 함수가 외부 함수의 맥락 (context)에 접근할 수 있는 것
• function test(){}는 var test = function(){};와 같다.

내부 함수란?

• 함수 안에서 또 다른 함수를 선언할 수 있는 JavaScript 문법
• 내부 함수는 외부 함수의 지역 변수에 접근할 수 있다.

function outside(){
    function inside(){
        var text = "text";
        console.log(text);
    }
    inside();
}
outside();

//위의 함수를 아래처럼 바꿔도 정상적으로 작동한다.
//inside(text)로 선언된 것이 아니라 inside()로 인자가 없다고 선언되어있음에도
//내부 함수이기 때문에 외부 함수의 지역 변수인 text를 사용할 수 있는 것이다.
function outside(){
    var text = "text";
    function inside(){
        console.log(text);
    }
    inside();
}
outside();

//또 다른 방식으로도 사용 가능하다.
function inside(){
    var text = "text";
    return function (){ console.log(text); }
}
var outside = inside();
outside();

프라이빗 변수(private variable)란?

• 아무나 수정할 수 있는 것을 방지한 변수

function factory_movie(title){
    return {
        get_title : function (){
            return title;
        },
        set_title : function(setTitle){
            if(typeof setTitle === 'String'){
                title = setTitle;
            }
            else{
                alert('제목은 문자열이어야 합니다.');
            }
        }
    }//객체 리턴
}

ironman = factory_movie('iron'); //실행 1

alert(ironman.get_title()); //실행 2

ironman.set_title('iron man'); //실행 3

alert(ironman.get_title()); //실행 4

//해설
/*
    1. ironman이라는 전역 변수에 factory_movie(title)을 실행해서 객체로 초기화
    2. ironman.get_title()을 사용했더니 'ironman'이 아니라 'iron'이 출력된다. 이룰 수정하려고 한다.
    3. ironman의 title을 set_title(setTitle)을 통해서 'ironman'로 변경했다.
    4. 정상적으로 'ironman'으로 출력된다.
*/

//추가 해설 (set_title의 작동에 대한 이해)
/*
    1. factory_movie(title)에서 title은 factory_movie(title)의 매개 변수가 되는 것이다.
    2. 이것은 factory_movie라는 함수 안에 title이라는 지역 변수가 있음을 의미한다.
    3. 클로저(closure)는 내부 함수가 외부 함수의 지역 변수에 접근할 수 있는 것을 의미한다.
    4. 즉, return으로 반환하는 객체의 내부 함수인 set_title은 factory_movie의 지역 변수인 title에 접근이 가능하다.
*/

클로저 사용시 주의점

• 클로저라는 것은 내부 함수가 외부 함수의 지역 변수를 접근할 수 있다.
  • for문의 조건식의 i같은 변수에 바로 접근할 수 있다는 뜻은 아니다.

// for문의 i같은 변수에 접근하는 방법
var arr = []
for(var i = 0; i < 5; i++){
    arr[i] = function(id) {
        return function(){
            return id;
        }
    }(i);
}
for(var index in arr) {
    console.log(arr[index]());
}

//해설
/*
    1. 우선, for문이 실행되면 arr[i] = function(id) {...}(i);가 된다.
       즉, arr[i]안에 명시된 i를 익명 함수의 id라는 매개 변수로 주어서
       함수를 실행하는 것하며 그 결과를 저장한다.
    2. 현재 익명 함수 안에는 또 다른 익명 함수가 있다.
       현재 외부 함수에는 i의 값을 받아 초기화 시킨 id라는 매개 변수가 있다.
    3. 그렇기 때문에 내부 함수에서 외부 함수의 지역 변수인 id에 접근해서
       그 값을 리턴해줄 수 있게 되는 것이다.
*/