클로저

 

 

클로저

클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다. 클로저는 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념으로 활용된다.

 

내부함수

function outter(){
	var title = 'coding everybody'; 
    function inner(){
        alert(title); //'coding everybody'; 
    }
    inner();
}
outter();

inner 함수에서 외부함수인 outter 함수의 title 변수에 접근할 수 있다.

 

클로저

내부함수는 외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있다. 이러한 메커니즘을 클로저라고 한다.

function outter(){
    var title = 'coding everybody';  
    return function(){        
        alert(title);
    }
}
inner = outter();
inner(); //'coding everybody'

outter 함수에서 return 값이 반환되면 outter 함수가 소멸하게 되지만 익명함수에서 title 변수를 바라보고 있기 때문에
inner()을 실행하면 title 변수에 접근할 수 있다.

 

클로저

function factory_movie(title){
    return {
        get_title : function (){
            return title;
        },
        set_title : function(_title){
            title = _title
        }
    }
}
ghost = factory_movie('Ghost in the shell');
matrix = factory_movie('Matrix');
 
alert(ghost.get_title()); //'Ghost in the shell'
alert(matrix.get_title());//'Matrix'
 
ghost.set_title('공각기동대');
 
alert(ghost.get_title()); //'공각기동대'
alert(matrix.get_title()); //'Matrix'

클로저의 특성을 이용해 setter 와 getter 을 설정하고 이것들을 객체로 반환하였다.
이 메서드들은 factory_movie의 지역변수 title의 값을 가리키고 있기때문에 이 함수가 종료 되어도 계속해서 이 변수를 사용하여 변경하고 접근할 수 있다.

 

var arr = []
for(var i = 0; i < 5; i++){
    arr[i] = function(){
        return i;
    }
}
for(var index in arr) {
    console.log(arr[index]()); //  5 5 5 5 5
}

for 문에 있는 i 값은 전역변수 이기 때문에 function 안에 있는 i 값은 클로저로 인해 전역변수 i 값을 가리키게 된다.
그렇기 때문에 결과값은 전부 5가 나오게된다.