JavaScript (20) 클로저

A closure is the combination of a funtion and the lexical environment within which that function was declared.

• 클로저는 난해하기로 유명한 자바스크립트의 개념 중 하나다.
• 클로저는 함수를 일급 객체 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성이다.

const x = 1;

function outerFunc() {
  const x = 10;
  function innerFunc() {
    console.log(x); //10
  }
  
  innerFunc();
}

outerFunc();

outerFunc 함수 내부에서 중첩 함수 innerFunc가 정의되고 호출되었다. 이때 중첩 함수 innerFunc의 상위 스코프는 외부 함수 outerFunc의 스코프다. 따라서 중첩 함수 innerFunc 내부에서 자신을 포함하고 있는 외부 함수 outerFunc의 x 변수에 접근할 수 있다.

const x = 1;

function outerFunc() {
  const x = 10;
  innerFunc();
}

function innerFunc() {
  console.log(x); //1
}

outerFunc();

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

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

렉시컬 스코프

자바스크립트 엔진은 함수를 어디서 호출했는 지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다.

렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 저장할 참고값, 즉 상위 스코프레 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경에 의해 결정된다.

함수 객체의 내부 슬롯 [[Environment]]

함수는 자신의 내부 슬롯 [[Environment]]에 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장한다.

클로저와 렉시컬 환경

외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명주기가 종료한 외부 함수의 변수를 참조할 수 있다. 이러한 중첩 함수를 클로저라고 부른다.

자바스크립트의 모든 함수는 상위 스코프를 기억하므로 이론적으로 모든 함수는 클로저다. 하지만 일반적으로 모든 함수를 클로저라 하지 않는다.

상위 스코프의 어떠한 식별자도 참조한지 않는 경우 대부분은 최적화를 통해 상위 스코프를 기억하지 않는다.

클로저의 활용

클로저는 상태를 안전하게 변경하고 유지하기 위해 사용한다.
즉, 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용된다.

캡슐화와 정보 은닉

캡슐화는 객체의 상태를 나타내는 프로퍼티와 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드는 하나로 묶는 것을 말한다. 캡슐화는 객체의 측정 프로퍼티나 메서드를 감출 목적으로 사용하기도 하는데 이를 정보 은닉이라 한다.