01 클로저의 의미 및 원리 이해

클로저는 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성.
자바스크립트의 고유의 개념이 아니어서 ECMAScript 명세에서도 클로저의 정의를 다루지 않고 있다.

MDN에서는 클로저에 대해 “A closure is the combination of a function and the lexical environment within which that function was declared.”라고 소개한다. ⇒ “클로저는 함수와 그 함수가 선언될 당시의 lexical environment의 상호관계에 따른 현상”

LexicalEnvironment의 environmentRecord와 outerEnvironmentReference에 의해 변수의 유효범위인 스코프가 결정되고 스코프 체인이 가능해진다고 했다.

내부함수에서 외부 변수를 참조하는 경우에 한해서만 combination, 즉 ‘선언될 당시의 LexicalEnvironment와의 상호관계’가 의미가 있을 것.

⇒ 지금까지 살펴본 바, 클로저란 “어떤 함수에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상”이라고 볼 수 있다.

//* 5-1 외부 함수의 변수를 참조하는 내부 함수(1)
var outer = function () {
  var a = 1;
  var inner = function () {
    console.log(++a);
  };
  inner();
}
outer(); // 2

각 주소에 저장돼 있던 값들은 자신을 참조하는 변수가 하나도 없게 되므로 가비지 컬렉터의 수집 대상이 될 것.

//* 5-2 외부 함수의 변수를 참조하는 내부 함수(2)
var outer = function () {
  var a = 1;
  var inner = function () {
    return ++a;
  };
  return inner();
};
var outer2 = outer();
console.log(outer2); // 2

outer 함수의 실행 컨텍스트가 종료되기 이전에 inner 함수의 실행 컨텍스트가 종료돼 있으며, 이후에 별도로 inner 함수를 호출할 수 없다는 공통점이 있다.

//* 5-3 외부 함수의 변수를 참조하는 내부 함수(3)
var outer = function () {
  var a = 1;
  var inner = function () {
    return ++a;
  }
  return inner;
};
var outer2 = outer();
console.log(outer2()) // 2
console.log(outer2()) // 3

가비지 컬렉터는 어떤 값을 참조하는 변수가 하나라도 있다면 그 값은 수집 대상에 포함시키지 않는다.
언젠가 inner 함수의 실행 컨텍스트가 활성화되면outerEnvironmentReference가 outer 함수의 LexicalEnvironment를 필요로 할 것이므로 수집 대상에서 제외된다.
우리는 어떤 함수의 L.E가 이를 ‘참조할’ 예정인 다른 실행 컨텍스트가 있는 한 실행 종료 이후에도 GC되지 않는다는 점.
스펙상으로는 선언 당시의 L.E 전부를 GC하지 않도록 되어 있으나, 2019년 기준으로 크롬이나 Node.js 등에서 사용중인 V8 엔진의 경우 내부 함수에서 실재로 사용하는 변수만 남겨두고 나머지는 GC하도록 최적화되었다.

⇒ 다시 정의하면, 클로저란 어떤 함수 A에서 선언한 변수 a를 참조하는 내부 함수 B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상