내부함수와 클로저

내부함수 : 자바스크립트는 함수 안에 또 다른 함수를 선언할 수 있다. 내부함수는 외부함수의 지역변수에 접근할 수 있다. 동일한 외부함수 안에서 만들어진 내부함수나 메소드는 외부함수의 지역변수를 공유한다.
예제
//
function outter(){
 function inner(){
  var title='coding everybody';
  alert(title);
 }
 inner();
}
outter();

 

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

 

클로저 :내부함수가 외부함수의 지역변수에 접근할 수 있고, 외부함수는 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다. 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것이다. 외부함수의 실행이 끝나서 외부함수가 소멸된 후에도 내부함수가 외부함수의 변수에 접근할 수 있다. 또한 객체의 메소드에서 사용할 수 있다.
예제
//
function outter(){
 var title='coding everybody';
 return function() {
  alert(title);
 }
}
inner=outter();
inner();

 

//
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());
alert(matrix.get_title());
 
ghost.set_title('공각기동대');
 
alert(ghost.get_title());
alert(matrix.get_title());

 

클로저 응용
// 에러코드
var arr = []
for(var i = 0; i < 5; i++){
    arr[i] = function(){
        return i;
    }
}
for(var index in arr) {
    console.log(arr[index]());
}

 

함수가 함수 외부의 컨텍스트에 접근할 수 있을것 같지만 결과는 아래와 같이 나온다.

 

 

위 코드는 아래와 같이 정상 코드로 변경해야 한다.

 

// 정상코드
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]());
}