Javascript 클로저

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

 

클로저의 정의

• MDN 정의: 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.
• 코어 자바스크립트 정의: 어떤 함수 A에서 선언한 변수를 참조하는 내부 함수 B를 외부로 전달할 경우, 함수 A의 실행 컨텍스트가 종료된 이후에도 그 변수가 사라지지 않는 현상.

예제 코드

function doSomething() {
  let x = 10;
  function sum(y) {
    return x + y;
  };
  return sum;
}

const add = doSomething();
console.log(add(5)); // 15

클로저 현상의 동작방식

• LexicalEnvironment: 코드 실행 컨텍스트가 생성될 때, 함수 내부 변수와 외부 환경을 기록하는 객체.
• LexicalEnvironmentRecord (Record): 현재 스코프에 있는 변수들을 기록.
• OuterEnvironmentReference (Outer): 상위 스코프의 LexicalEnvironment를 참조.

실행 과정

1. 전역 실행 컨텍스트 생성:
   • 전역 LexicalEnvironment 생성, 전역 코드 평가 (함수와 변수를 호이스팅).
   • Record에 sum 함수와 add 변수를 기록.
   • Outer에 null 할당, 콜스택에 전역 LexicalEnvironment push.
2. sum 함수 호출:
   • sum의 LexicalEnvironment 생성, 내부 코드 평가.
   • 매개변수 x와 익명 함수 호이스팅, Record에 기록.
   • Outer는 전역 LexicalEnvironment를 가리킴.
   • x에 2 할당 후, 콜스택에 sum의 LexicalEnvironment pop.
3. add 함수 호출:
   • add의 LexicalEnvironment 생성, 내부 코드 평가.
   • 매개변수 y 호이스팅, Record에 기록.
   • Outer는 sum의 LexicalEnvironment를 가리킴.
   • y에 7 할당 후, return문에서 x 변수를 찾기 위해 Outer로 이동.

클로저 현상의 구체적 동작

• 변수 탐색 과정:
  • add의 Record에서 x를 찾지 못해 Outer의 sum LexicalEnvironment로 이동.
  • sum의 Record에서 x를 찾아 값을 반환.

정리

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저 현상은 어떤 함수 A에서 선언한 변수를 참조하는 내부 함수 B를 외부로 전달할 경우, 함수 A의 실행 컨텍스트가 종료된 이후에도 변수가 사라지지 않는 현상이다. 이러한 변수는 자유변수라고도 부른다.