javascript 클로저 코드를 통해 알아보기

 

function outerFunc() {
    var foo = "Foo";
    
    return function() {
    	console.log(foo);
    }
}

var closure = outerFunc();
closure();

 

 

위 스크립트가 실행되면 아래 그림 좌측부터 우측 순서로 실행컨텍스트가 생성됩니다.

 

 

실행컨텍스트 - 1

 

실행 컨텍스트는 함수가 호출되는 시점에 생성되며, 이 때 실행 컨텍스트 내부의 SCOPE 객체는 함수가 어디에 선언되었는지에 따라 결정되게 됩니다.  

 

 

그 다음, 호출 스택에 아래와 같은 순서로 실행컨텍스트가 push / pop 됩니다.

1. push 전역 실행컨텍스트
2. push outerFunc 실행컨텍스트
3. pop outerFunc 실행컨텍스트 
4. push anomyFunc 실행컨텍스트
5. pop anomyFunc 실행컨텍스트
6. pop 전역 실행컨텍스트

 

전역 실행컨텍스트 VO 객체에 closure 변수는 최초엔 undefined 로 초기화 되어있지만

var closure = outerFunc()

이 코드의 실행결과로 anomyFunc 참조 값이 할당됩니다.

 

전역 실행컨텍스트 VO closure 변수 값 할당

 

closure()

이 코드로 인해 호출스택에 anomyFunc 실행컨텍스트가 push 됩니다.

 

anomyFunc 실행컨텍스트 VO 객체에는 foo 변수가 존재하지 않습니다. 

 

하지만, 여기서 끝나지 않고 SCOPE 객체에 들어있는 컨텍스트 객체들을 순서대로 참조하며 foo 변수를 찾습니다. (Scope chaining)

 

outerFunc 컨텍스트의 VO 객체에 foo 변수가 존재하므로 

 

콘솔창에는 "Foo" 가 출력되고 호출스택에서 anomyFunc 컨텍스트는 pop 됩니다.

 

마지막으로 전역 컨텍스트가 pop 되며 스크립트는 종료됩니다.

 

 

 

여기서, 외부함수의 컨텍스트 환경에 접근할 수 있는 함수인 anomyFunc 을 '클로저 함수' 라고 부르며,

변수 closure 는 '클로저' 가 됩니다.