[js] 클로저에 대한 정리

클로저에 대한 정의

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 여기서 어휘적 환경은 Lexical Environment 을 의미하며, 렉시컬 환경은 해당 범위에서 선언된 변수 및 함수 등의 정보를 저장하고 관리하는 자료구조이다. 

여기서 왜 함수와 함수가 선언된 어휘적 환경의 조합이 클로저인가에 대해 생각해보기 전에  클로저 자체는 그리 특별한 현상은 아니라는 점 부터 알고 넘어가야 할듯하다. 클로저는 함수가 생성될 때 해당 함수가 정의된 렉시컬 환경에서 선언되어 있는 변수나 함수를 참조하는 현상을 의미한다. 즉, 함수가 생성되면 자동으로 발생하는 현상이 클로저 라는 소리이다.

 

그런데 이러한 클로저는 개념적으로 사용하는 경우와 실제 이 개념을 활용할 때 언급하는 클로저는 의미는 같지만, 목적은 다르다. 왜냐 하면, 개념적인 의미에서 클로저는 하나의 현상을 지칭하는 것일 뿐이지만, 활용적인 면에서 클로저는 실제 함수가 종료가 된 뒤에도 해당 함수에서 선언된 변수는 지속적으로 참조하여(살려두고) 활용하고자 할 때 쓰이기 때문이다.

function outerFunction() {
  let outerVar = 10;

  function innerFunction() {
    console.log(outerVar); // innerFunction이 outerVar에 접근하는 클로저
  }

  return innerFunction;
}

const closureExample = outerFunction(); // outerFunction을 호출하면 innerFunction을 반환
closureExample(); // 이때, innerFunction이 outerVar에 접근 가능한 클로저가 발생

 

예를 들어, 위의 코드에서 innerFunction은 외부 함수인 outerFunction 내에서 정의되었으며, 이 함수 내에서 outerVar에 접근하고 있다. closureExample에 outerFunction의 반환값인 innerFunction을 할당한 후 closureExample()을 호출하면 innerFunction은 여전히 outerVar에 접근할 수 있게 되는데, 이를 클로저 라고 부른다.

 

즉, 원래라면 소멸해야 하는 outer 함수의 outerVar 변수는 innerFunction 이라는 내부함수가 계속 참조하고 있는 한 사라지지 않고 활용할 수 있게 된다는 말이다.

 

결론적으로 클로저는..

클로저란 외부함수 내에 선언된 내부함수가 외부함수에서 선언된 변수나 함수를  외부함수가 종료되더라도 계속해서 참조가능한 현상이다.

 

즉, 위 예시에서 outerFunction 이라는 함수가 실행되고 종료될 때 innerFunction 함수는 outerVar 에 더 이상 접근하지 못하는게 맞으나, 클로저로 인해 innerFunction 함수가 outerFunction 의 스코프에 선언된 outerVar 변수를 계속해서 참조할 수 있게 되는 것으로 정리할 수 있겠다.

 

 

참고)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

클로저 - JavaScript | MDN