Javascript 클로저(Closure) 이론

 

클로저(Closure)

 

 

• 함수와 그 함수 선언될 당시의 협동이라고 말할 수 있다. 다르게 말하면 실행 콘택스트 A와 함수B가 콤비가 되어 무언가를 한다라고 볼수 있다.
• 여기서 눈여겨 봐야할 것은 LexicalEnviroment의 outerEnvironmentReterenced이다. 함수B와 실행 콘텍스트 A가콤비가 되어 무언가를 한다고 했는데 이는 함수 B가 A에서 선언한 무언가로 앤해 A로 접근하려고 할 때 문제가 되는데 이때 함수 B가 A로 접근할 수 있게 도와주는 함수 B의 outerEnvironmentReterenced가 초점을 맞쳐야할 대상이다.
• 즉 다시 말해 함수 B의 outerEnvironmentReterenced는 컨텍스트 A의 environmentRecord를 참조하므로 "컨텍스트 A에서 선언한 변수를 내부함수 B에서 접근할 경우에 발생하는 특수한 현상"이라고 말할 수 있다.

 

 

 

 

 

 

클로저 코드 분석

 

 

1. 처음에는 전역이 실행되고 outer는 함수가 담기고 outer2는 아직 정의되지 않았다.

 

2. 두 번째로 outer 함수가 실행되고 변수 a에 1이 담기고 inner 변수에도 함수가 담기었다.

 

 

 

 

 

3. 세 번째로 outer의 함수의 실행이 return inner을 마지막으로 끝나자 outer2에 outer 안에 있던 inner 함수가 담긴다. 그리고 outer 함수가 끝났어도 아직 a의 참조 카운터는 사라지지 않고 아직 살아있는 상태이다. 왜냐하면 inner 함수를 외부의 outer2에 담아주어 참조가 아직 살아있는 것이다.

 

4. 결국 console.log로 outer2을 호출하면 inner 함수가 다시 발동되어 a의 참조가 시작되어 값이 계산되어 나온다. 변수 a의 1이 2로 변경되어 호출되고 있는 과정을 확인 할 수 있다.

 

 

 

 

5. 결국 console.log 호출로 a가 2로 호출되고 바로 밑에 있는 console.log가 순서대로 또 호출되면서 a의 참조는 계속되고 a의 값 또한 계속 계산되어 호출되어진다.

 

6. 이렇게 전역 실행 콘텍스트가 끝날 때까지 실행 코드가 남아있다면 a의 변수 참조가 영원히 지속 가능하다.

 

 

 

 

정리

 

즉 위의 코드처럼 컨텍스트 A에서 선언한 변수a를 참조하는 내부함수 B를 A의 외부로 전달할 경우, A가 종료된 뒤에도 변수 a가 사라지지 않는 현상을 클로저라고 할 수 있다.

한마디로 클로저는 함수 종료후에도 사라지지 않는 지역변수(변수 a)를 만들 수 있다는 것이다.

 

 

 

 

 

• 위의 코드도 클로저를 이용한 코드이다. obj 변수로 a 함수를 선언해 주어 a 함수 안의 변수들을 계속 참조할 수 있도록 하였다.
• 여기서 중요한 것은 obj 변수가 get, set이 있어 값을 바꿀 수도 있고 읽어올 수 있지만 obj 자체가 지역변수 localA에 직접 접근하는 것은 아니다라는 것이다.

 

 

 

 

 

 

 

 

인프런의 정재남 강사님의 강의를 참조하였습니다.

https://www.inflearn.com/instructors/46840/courses