프론트엔드 면접 준비 : 클로저(Closure)란?

클로저란?

클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다. 

 

클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(렉시컬 스코프)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말한다.

즉, 자신이 생성될 때의 환경(렉시컬 스코프)을 기억하는 함수다.

function outerFunc() {
  var x = 10;
  function innerFunc() { 
    console.log(x); 
  };
  return innerFunc;
}

var closure = outerFunc();
closure(); // 10

 

렉시컬 스코프는 함수를 어디에 선언하였는지에 따라 상위 스코프가 결정되는 것을 말하는데,

 

위의 코드를 살펴보면 innerFunc은 렉시컬 스코프에 의해 outerFunc의 지역변수 x를 참조하고 있다.

그리고 outerFunc는 var closure = outerFunc(); 구문에서 호출된 후 콜스택에서 제거되지만 콜스택에서 제거하는 동시에 innerFunc를 return 해준다.

 

따라서 closure()를 호출하면 x를 참조할 수 없을 것 같지만  innerFunc은 선언될 때 상위 스코프인 outerFunc를 스코프를 기억하고 있기 때문에 outerFunc 내부의 변수 x의 값인 10를 기억하여 그 값을 출력할 수 있게된다. 

 

이처럼 자신을 포함하고 있는 외부함수보다 내부함수가 더 오래 유지되는 경우, 외부 함수 밖에서 내부함수가 호출되더라도 외부함수의 지역 변수에 접근할 수 있는데 이러한 함수를 클로저(Closure)라고 부른다.