[ Javascript ] 클로저란 ?

클로저(Closure)란 ?

클로저는 특정 함수가 참조하는 변수들이 선언된 렉시컬 스코프(Lexical Scope)는 계속 유지되는데, 그 함수와 스코프를 묶어서 클로저라 한다.

 

:: 렉시컬 스코프(Lexical Scope) : 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정하는 것이다. 중요한 점은 함수의 호출이 아닌 함수의 선언에 따라 결정된다는 점이다.

 

<script>

   var num = 1;
   function a() {
       var num = 10;
       b();
   }
 
   function b() {
       console.log(`num : ${num}`);
   }
 
   a(); // 1
   b(); // 1

</scrip>

 

이렇게 출력되는 이유는 함수의 호출로 상위 스코프가 결정된 것이 아니라 함수의 선언에 따라 상위 스코프가 결정되었기 때문이다. 즉 a, b모두 1을 출력한 것으로 볼 때 b함수가 전역을 가리키고 있다는 것을 알 수 있다.

 

<script>

   var name = 'Hello World'; // 전역변수
 
   function c() {
       var name = 'New World'; // 지역변수
       // secondName()은 내부함수이며, 클로저이다.
       function secondName() {
           // 부모함수에서 선언된 변수를 사용한다.
           console.log(`name : ${name}`); // New World
       }
       secondName();
   }
   
   c();

</script>

 

c();는 지역변수 name, secondName()함수를 생성한다. secondName()함수는 c()안에 정의된 내부 함수이며, c() 함수 내부에서만 사용이 가능하다.

 

---

 

최종정리

 

<script>
 
   // 클로저의 예
   function outer() {
       var count = 0;
       var inner = function() {
           return ++count;
       };
       return inner;
   }
   var increase = outer();
 
   console.log(increase()); // 1
   console.log(increase()); // 2
 
</script>

 

:: 정리

1. count변수는 outer()함수의 로컬 변수다.따라서 원칙적으로는 outer()함수 내부에서만 접근이 가능하다.

2. outer()함수 내부에 다시 함수를 하나 선언하여 inner변수에 할당했다.

3. inner변수에 할당한 함수는 outer()함수의 로컬 변수인 count에 접근하여 1만큼 증가시키고 이 값을 반환한다.

4. outer()함수의 반환값으로 inner변수를 지정하면서 함수 정의를 마친다.