[JavaScript] 클로저(Closure),렉시컬 스코프(Lexical Scoping)이란 무엇일까? 사용 예제와 원리를 알아보자

클로저(closure)는 자바스크립트를 사용하다보면 자주 접하게되는 용어이다. 하지만, 클로저는 자바스크립트 고유의 개념은 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다.

MDN에서 정의하는 클로저를 알아보자.

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다.

중요한점은 어휘적 범위(Lexical scoping)이다.

 const num = 1; 
      

          
      
 function outerFunction() { 
      

            const num = 10; 
      

             
      

            function innerFunction() { 
      

                console.log(num) // 10 
      

            } 
      

             
      

            innerFunction(); 
      

        } 
      

          
      

        outerFunction(); 
      

중첩 함수 innerFunction 내부에서 자신을 포함하고 있는 외부 함수 outerFunction의 number변수에 접근 할 수 있다.

만약 innerFunction 함수가 outerFunction 함수의 내부에서 정의된 중첩 함수가 아니라면 innerFunction 함수를 outerFunction 함수의 내부에서 호출한다고 하더라도 outerFunction 함수의 변수에 접근할 수 없다.

 const num = 1; 
      

          
      
 function outerFunction() { 
      

          const num = 10; 
      

          innerFunction(); 
      

        } 
      

          
      
 function innerFunction() { 
      

          console.log(num); // 1 
      

        } 
      

          
      

        outerFunction(); 
      

          
      

이러한 현상은 자바스크립트가 렉시컬 스코프를 따르기 때문이다.

렉시컬스코프란?

함수를 어디서 호출했는지가 아니라 함수를 어디서 정의했는지에 따라 상위 스코프를 결정한다. 함수가 호출된 위치는 상위 스코프 결정에 어떠한 영향도 주지 않는다. 즉, 함수의 상위 스코프는 언제나 자신이 정의된 스코프다.
이처럼 함수의 상위 스코프는 함수 정의가 실행될 때 정적으로 결정된다. 함수 정의(함수 선언문 또는 함수 표현식)가 실행되어 생성된 함수 객체는 이렇게 결정된 상위 스코프를 기억한다. 함수가 호출될 때 마다 함수의 상위 스코프를 참조할 필요가 있기 때문이다.

 const x = 1; 
      

          
      
 function foo() { 
      

            const x = 10; 
      

            bar(); 
      

        } 
      

          
      
 function bar() { 
      

            console.log(x); 
      

        } 
      

          
      

        foo(); 
      
 // 1 
      

        bar(); 
      
 // 1 
      

          
      

클로저와 렉시컬 환경 조합

 const x = 1; 
      

          
      
 function outer() { 
      

          const x = 10; 
      

          const inner = function () { 
      

            console.log(x); 
      

          }; 
      

          return inner; 
      

        } 
      

          
      
 // outer 함수를 호출하면 중첩 함수 inner를 반환한다. 
      
 // 그리고 outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 팝(pop)되어 제거된다. 
      
 const innerFunction = outer(); 
      

        innerFunction(); // 10 
      

outer()를 호출하면 outer()는 중첩 함수 inner를 반환하고 생명 주기(life cycle)를 마감한다.
outer()의 지역 변수 x와 변수 값 10을 저장하고 있던 outer 함수의 실행 컨텍스트가 제거되었으므로 outer() 지역 변수 x 또한 생명 주기를 마감하게 된다. 그러나 위 코드의 실행 결과를 확인하면 outer()의 지역 변수 x의 값인 10이 출력되는 것을 확인할 수 있다.
이것이 가능한 이유는 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있기 때문이다. 이러한 중첩 함수를 클로저(closure)라고 부른다.

자바스크립트의 모든 함수는 자신의 상위 스코프를 기억한다. ([[Environment]] 내부 슬롯에 저장)

모든 함수가 기억하는 상위 스코프는 함수를 어디서 호출하든 상관없이 유지된다. 따라서 함수를 어디서 호출하든 상관없이 함수는 언제나 자신이 기억하는 상위 스코프의 식별자를 참조할 수 있으며 식별자에 바인딩 된 값을 변경할 수도 있다.

추가적으로 클로저는 중첩 함수가 상위 스코프의 식별자를 참조하고 있고 중첩 함수가 외부 함수보다 더 오래 유지되는 경우에 한정하는 것이 일반적이다.

베타존 : 네이버쇼핑 스마트스토어