자바스크립트의 클로저(Closure)

클로저(closure)는 외부 변수를 기억하고 이 외부 변수에 접근할 수 있는 함수, 함수가 선언될 때의 환경을 기억하였다가 자신이 선언 되었을 때의 환경이 아닌 곳에서 호출되어도 자신이 선언된 환경에 접근할 수 있는 함수를 의미한다.

함수는 자신이 정의된 환경을 기억한다

자바스크립트의 모든 함수는 자신의 내부 슬롯 [[Environment]]에 '자신이 정의된 환경의 참조'를 저장한다.

[[Environment]]에 저장되는 '자신이 정의된 환경의 참조'는 함수 정의가 평가되어 '함수 객체가 생성될 때의 렉시컬 환경'이다.

자신이 정의된 환경 = 함수 객체가 생성될 때의 렉시컬 환경

'함수 객체가 생성될 때의 렉시컬 환경'은 '생성되는 함수 객체의 외부 렉시컬 환경'이고, 다르게 표현하면 '자신의 상위 스코프'라 할 수 있다.

함수 객체가 생성될 때의 렉시컬 환경 = 생성되는 함수 객체의 외부 렉시컬 환경 = 자신의 상위 스코프

간단하게 요약하면 함수의 내부 슬롯 [[Environment]]에는 '상위 스코프의 참조'를 저장한다고 할 수 있다.

자신이 정의된 환경의 참조 = 상위 스코프의 참조

함수는 자신이 존재하는 한 내부 슬롯 [[Environment]]에 렉시컬 환경의 참조를 저장하고 있다.

외부 함수 보다 중첩 함수의 생명 주기가 길다

중첩 함수를 포함하고 있는 외부 함수 보다 중첩 함수의 생명 주기가 더 길면 외부 함수 밖에서 중첩 함수를 호출해도 외부 함수의 지역 변수에 접근할 수 있다.

function outer() {
  const x = 10;
  const inner = function () { console.log(x); };
  return inner;
}
const innerFunc = outer();
innerFunc();

외부 함수의 실행이 종료되면서 중첩 함수를 반환하고 외부 함수의 생명 주기는 종료되고 외부 함수의 실행 컨텍스트가 실행 컨텍스트 스택에서 제거된다.

외부 함수의 렉시컬 환경은 중첩 함수의 [[Environment]] 내부 슬롯에 의해 참조되고 있고 중첩 함수는 전역 변수에 의해 참조되고 있으므로 가비지 컬렉션의 대상이 되지 않기 때문에 외부 함수의 실행 컨텍스트가 실행 컨텍스트 스택이 제거되지만 외부 함수의 렉시컬 환경은 소멸되지 않는다.

반환된 중첩 함수를 호출하면 중첩 함수의 실행 컨텍스트가 생성되면서 렉시컬 환경에 대한 참조는 중첩 함수 객체의 내부 슬롯 [[Environment]]에 저장되어 있는 참조 값을 할당하고, 실행 컨텍스트 스택에 push된다.

중첩 함수는 외부 함수가 실행 컨텍스트에서 제거된 것과 상관없이 자신이 정의된 위치에 의해 결정된 상위 스코프를 기억하고 있으므로 상위 스코프의 식별자를 참조할 수 있고 식별자의 값을 변경할 수도 있다.

1. 외부 함수의 실행 종료되면서 중첩 함수 반환
   • 이때, 반환된 중첩 함수는 외부(전역) 변수에 의해 참조 되고 있다.
2. 실행 컨텍스트 스택에서 외부 함수의 실행 컨텍스트 제거
   • 반환된 중첩 함수가 외부 함수를 참조하고 있기 때문에 외부 함수의 렉시컬 환경은 사라지지 않는다.
3. 반환된 중첩 함수 호출
4. 중첩 함수의 실행 컨텍스트 생성
5. 실행 컨텍스트 스택에 push
   • 렉시컬 환경에 대한 참조는 중첩 함수의 내부 슬롯 [[Environment]]에 저장되어 있는 참조 값이 할당된다.

중첩 함수가 외부 함수보다 더 오래 유지되어야 상위 스코프의 식별자를 참조할 수 있다.

중첩 함수가 상위 스코프의 식별자를 참조하고 있어야 한다

자바스크립트의 모든 함수는 자신의 상위 스코프를 기억하기 때문에 함수를 호출하는 곳에 상관없이 언제나 자신이 기억하는 상위 스코프의 식별자를 참조할 수 있으며 식별자에 바인딩 된 값을 변경할 수도 있다.

하지만 대부분의 모던 브라우저는 최적화가 되어있어 상위 스코프의 모든 식별자를 기억하지 않고 클로저가 참조하고 있는 식별자만을 기억하며, 중첩 함수가 상위 스코프의 어떤 식별자도 참조하지 않는다면 상위 스코프를 기억하지 않는다. 이렇게 클로저에 의해 참조되는 상위 스코프의 변수를 자유 변수(free variable)라 한다.

중첩 함수가 식별자를 참조할 수 있고 식별자에 바인딩 된 값을 변경할 수 있어야 클로저라 할 수 있다.

클로저의 조건

자바스크립트의 함수는 내부 슬롯 [[Environment]]에 자신이 정의된 환경을 기억하고 있기 때문에 이론적으로 모든 함수는 클로저 이지만 중첩 함수가 상위 스코프의 식별자를 참조하고 있고 중첩 함수가 외부 함수보다 더 오래 유지되는 경우에 한정하는 것이 일반적이다.

1. 중첩 함수는 상위 스코프를 기억(저장)하고 있어야 한다.
2. 외부 함수 보다 중첩 함수의 생명 주기가 길어야 한다.
3. 중첩 함수가 상위 스코프의 식별자를 참조하고 있어야 한다.

클로저의 활용

클로저를 활용하면 상태를 안전하게 변경하고 유지하기 위해 사용 하지만 잘못 사용할시 메모리 문제가 생길수 있다.

변수 값은 누군가에 의해 언제든지 변경될 수 있어 오류 발생의 근본적 원인이 될 수 있기 때문에 상태(state)가 의도치 않게 변경되지 않도록 안전하게 은닉(information hiding)하고 특정 함수에게만 상태 변경을 허용하여 상태를 안전하게 변경하고 유지할 수 있다.

특히 상태 변경이나 가변(mutable) 데이터를 피하고 불변성(Immutability)을 지향 하는 함수형 프로그래밍에서 부수 효과(Side effect)를 최대한 억제 하여 오류를 피하고 프로그램의 안정성을 높이기 위해 클로저는 적극적으로 사용된다.

• 상태 유지
• 정보의 은닉
• 전역 변수의 사용 억제

캡슐화

캡슐화(encapsulation)는 정보의 일부를 외부에 감추어 은닉(information hiding)하는 것을 말한다.

외부에 공개할 필요가 없는 구현의 일부를 외부에 공개되지 않도록 감추어 적절치 못한 접근으로부터 정보를 보호하고 객체 간의 상호 의존성(결합도)를 낮출수 있다.

자바스크립트 객체의 모든 프로퍼티와 메서드는 기본적으로 외부에 공개되어 있어 기본적으로 public하다.

자바스크립트는 캡슐화를 완전하게 지원하지 않는다.

인스턴스 메서드를 사용한다면 자유 변수를 통해 private를 흉내 낼 수는 있지만 프로토타입 메서드를 사용하면 이마저도 불가능해진다. ES6의 Symbol 또는 WeakMap을 사용하여 private한 프로퍼티를 흉내 내기도 했으나 근본적인 해결책이 되지는 않는다.

TC39 stage 3, 클래스에 private 필드를 정의할 수 있는 새로운 표준 사양이 제안되어 있다.

tc39/proposal-class-fields

정리

클로저는 반환된 중첩 함수가 자신이 선언 되었을 때의 렉시컬 환경(상위 스코프)을 중첩 함수 자신의 내부 슬롯 [[Environment]]에 저장하고 기억하여, 자신이 선언 되었을 때의 환경이 아닌 곳에서 호출되어도 그 환경에 접근할 수 있는 함수이다.

• 호출된 곳에 상관없이 자신이 기억하고 있는 환경의 식별자를 참조할 수 있는 함수
• 외부 함수의 생명 주기가 마감되고 실행 컨텍스트 스택에서 제거 되어도 참조할 수 있다.