98. 클로져

클로져란 함수와 그 함수를 감싸고 있는 렉시컬 환경의 조합이며, 내부 함수에서 외부 함수에 접근할 수 있는 권한을 주는 것이 클로저이다. 아래는 클로져의 간단한 예제이다.

function outer() {
  const x = 1;
  function inner() {
    return x;
  }
  return inner;
}

const inner = outer();
console.log(inner()); // 1

위의 코드에서 outer 외부에서는 outer 내부의 변수 x 에는 접근할 수 없다. 즉, x 의 값을 출력하거나 변경하거나 삭제가 불가능하다.

위 코드의 내부 동작은 아래와 같다.

• 코드가 시작되면 전역 스코프에 렉시컬 환경 생성

• outer 함수가 호출되어 실행 컨텍스트에 등록되고 변수 x가 메모리에 올라감

• outer 함수 내부의 inner 함수는 호출되지 않고 반환되기 때문에, 실행 컨텍스트에는 등록되지 않음

• outer 함수가 끝나면, 실행 컨텍스트에서 outer 함수가 사라짐

• outer 함수는 scope chain 에는 남아있고, inner 함수가 outer 함수를 참조하고 있기 때문임

• inner 함수가 호출되어 outer 함수의 내부 변수 x 가 반환됨

즉, 내부 함수가 외부 함수를 참조하고 있기 때문에, 전역에서 내부 함수를 호출했을 때 외부 함수의 변수에 접근이 가능한 것이다.

이러한 클로저의 동작은 private 선언자의 역할과 동일하다.

활용 예제

클로져는 내부 함수를 은닉하고, 공개 함수를 통한 데이터 조작을 위해서 사용된다.

아래의 함수는 MDN의 예제를 참고한 것이다. couter 함수 외부에서는 privateCountValue 변수에 접근이 불가능하여 함수 안에 있는 변수의 값을 읽고, 쓰고 변경하지 못한다. 그러나 counter 함수에서 리턴하는 내부 함수들, 즉, increment, decrement, value 가 외부함수를 참조하기 때문에, 이러한 함수를 호출하는 것을 통해서 바깥에서 안에 있는 변수에 접근과 값의 변경 등의 작업을 할 수 있다.

const counter = () => {
  let privateCountValue = 0;
  function changeBy(val) {
    privateCountValue += val;
  }

  return {
    increment() {
      changeBy(1);
    },
    decrement() {
      changeBy(-1);
    },
    value() {
      return privateCountValue;
    },
  };
};

const c = counter();
console.log(c.value()); // 0

c.increment();
console.log(c.value()); // 1

c.increment();
console.log(c.value()); // 2

c.decrement();
console.log(c.value()); // 1

그러나 클로져를 사용하기 보다는 클래스를 사용하여 private 필드를 만들고, 해당 필드를 조작하는 메서드 등을 정의하는 것이 훨씬 간편하고 좋다.

또한, 클로져에서 생각해야 할 것은 let 과 var 의 차이점인데, 아래의 두가지만 기억하자.

• let: 블록 스코프 레벨

• var: 함수 스코프 레벨