[JavaScript] 클로저 (closure)

클로저란 내부 함수가 외부 함수의 지역변수에 접근할 수 있는 것이다.

 

 

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

내부함수 inner에서 외부함수인 outter의 지역변수 title에 접근하여 경고창이 출력된다.

 

 

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

외부함수의 호출이 끝나도 내부함수가 외부함수의 변수를 사용할 수 있다

7행 → 함수 outter를 호출하고, 그 결과로 이름 없는 함수가 변수 inner에 담긴다.

8행 → outter 함수는 실행이 끝났기 때문에 이 함수의 지역변수는 소멸되는 것이 자연스럽다.

하지만 함수 inner를 실행했을 때 지역변수의 값이 출력된다.

즉, 외부함수의 지역변수 title이 소멸되지 않았다는 것을 의미한다.

 

클로저란 내부함수가 외부함수의 지역변수에 접근 할 수 있고,

외부함수의 지역변수는 해당 변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 의미한다.

 

 

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

 

 

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 
}

배열 데이터에 값을 할당할 때 사용된 변수 i는 호출 시점에서 접근하기 때문에,

출력 시 반복문이 종료된 상태의 i의 값 5만을 참조한다.

 

 

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]()); //0 / 1 / 2 / 3 / 4 
}

즉시 실행함수(IIFE)로 값을 할당하여, 호출과 참조 시점을 같게 해 준다.

 

 

 

[참고]

https://opentutorials.org/course/743/6544

https://heropy.blog/2017/11/10/closure/