자바스크립트 클로저

클로저 closure

내부함수가 외부함수 변수에 접근할 수 있는 것

외부함수가 종료되었더라도 내부함수에서 외부함수의 변수에 접근할 수 있는 방법

 

 

 

함수 안에서 또 다른 함수를 선언하여 내부함수를 만들 수 있다.

 

function outerFuc(){ 		// 외부함수

    function innerFuc(){    	// 내부함수
    
    }
    innerFuc();
}
outerFuc();

 

 

내부함수에서 외부함수 지역변수에 접근할 수 있다.

 

function outerFuc(){
    var text = '지역변수';
    
    function innerFuc(){
        console.log(text);
    }
    innerFuc();
}
outerFuc(); 

 

 

외부함수가 더 이상 사용되지 않아도 내부함수가 외부함수 변수에 접근할 수 있다.

 

function outerFuc(){ 
    var text = '지역변수';
    
    var innerFuc = function(){
    	console.log(text);
    }
    return innerFuc;
}

var inner = outerFuc();
inner();

 

• outerFuc를 호출하면 innerFuc를 return 한다.
• return한다는 것은 outerFuc는 종료되었다는 것, outerFuc의 변수인 text 또한 유효하지 않다는 것.
• innerFuc가 변수 text에 접근할 수 있는게 클로저.
• 클로저는 내부함수가 자신이 선언됐을 때의 환경인 스코프를 기억하는 것.

 

 

var btns = $('button');
var i;
for(i = 0; i < btns.length; i++){
    $(btns[i]).on('click', function(){
    	console.log(i); 		// btns.length 출력
    });
}

var btns = $('button');
var i;
var eventHandler = function(idx){
    return function(){
    	console.log( btns[idx] );	// 외부함수에 idx를 인자로 참조
    }
};

for(var i = 0; i < btns.length; i++){
    $(btns[i]).on('click', eventHandler(i));	// 해당 버튼의 index 출력
}

 

알겠는데 모르겠다로 마무리..