Closure란?

 

close ? closure?

 

closure를 검색하면 "폐쇄"라는 뜻이 나온다. 

 

뭐를 폐쇄하는지? 

 

Closure를 더 검색해보자. MDN 사이트를 확인하자

출처 : mdn 클로저

눈여겨 봐야 할 부분이 "함수와 함수가 선언된 어휘적 환경의 조합이다" 라는 부분이다

 

다시 정리하면 "에워싸여져 함께 묶여진 함수"라고 할 수 있다.

=> 둘러쌓인 LexicalEnvironment의 참조 라고 볼 수 있다.

 

 

closure란?

다시 다른말로 보자면

 

위 그림들을 보자면 뭐... 글 그대로 읽고 그림을 본다면 이해가 갈 것이다.

 

그러면 특별한 현상이 뭔지 이제 알아가보자. 

 

우선 전에 해봣던 것을 복습해보자. 

var outer = function(){
	var a = 1;
    var inner = function(){
    	console.log(++a);
    };
    inner();
}

outer();

1. 전역 컨텍스트가 열린다. 
2. outer를 실행
3. outer 실행 컨텍스트가 쌓임 / environmentRecord => 변수 a 선언 및 값 할당, inner함수 선언 || outerEnvironmentReference => 전역 컨텍스트의 LexicalEnvironment 
4.  inner호출  environmentRecord => 아무것도 없음. || outerEnvironmentReference => outer 컨텍스트의 lexical environment참조
5. inner함수 종료 => inner 실행 컨텍스트 사라짐
6. outer 함수 종료 = > outer 컨텍스트 사라짐
7. 전역변수 사라짐 

그러면 다른 코드를 보자

 

var outer = function(){
	var a = 1;
    var inner = function (){
    	return ++a;
    };
    return inner;
}
var outer2 = outer();
console.log(outer2()):
console.log(outer2());

 

1. 전역 컨텍스트에서 outer라는 변수 수집, outer2라는 변수 수집

outer함수를 호출하기 직전까지는 outer2가 undefined임

2. outer함수 호출시 outer에 대한 실행 컨텍스트가 쌓이면서 outer함수 진행에 따라서는 

a에는 1이 들어가고 inner에는 함수가 들어감. 

3. 실행이 끝나면  inner를 반환하므로 inner가 outer2에 담김

4.  여기서 outer2에서 다시 inner함수를 호출할 수 있으니 outer 함수 안에 a는 사라지지 않은 상태임

=>원래는 죽는게 맞는게 참조카운트가 0이 아니라 좀비가 됨. 

5. console.log(outer2())를 다시 하면서 a값이 점점 증가함. 

 

여기서 a는 전역 컨텍스트가 종료되기 전까지 살아남음  

 

이것을 한줄로 정리하면

클로저의 엄청난 점은 지역변수가 함수 종료 후에도 사라지지 않게 할 수 있다는 점이란다!

(좋은건가?)