[JavaScript] 클로저

잘못 된 내용에 대한 지적은 언제든 환영입니다.

렉시컬 환경

• JS에서 실행 중인 함수, 코드블록, 전역 스코프는 렉시컬 환경이라는 객체를 갖는다.
• 모든 지역 변수를 프로퍼티로 저장하고 있는 환경 레코드와, 상위 스코프의 각 렉시컬 환경에 해당하는 외부 렉시컬 환경을 가지고 있다.
• 외부함수의 실행 컨텍스트가 소멸 된 이후에도 외부 렉시컬 환경 참조가 가능하다.

클로저

// outerFunc 실행 컨텍스트가 소멸되어도 렉시컬 환경은 남기에, 해당 렉시컬 환경의 변수를 참조할 수 있다.
function outerFunc() {
  var x = 10;
  var innerFunc = function () {
    console.log(x);
  };
  return innerFunc;
}

var inner = outerFunc();
inner(); // 10

• 클로저는 선언 된 스코프를 기억하고, 어디서든 호출되더라도 선언 된 스코프의 외부 변수에 접근할 수 있는 함수를 말한다.
  👉 JS 함수는 모두 자신이 선언 된 렉시컬 환경을 저장하고 외부 변수에 접근할 수 있기에 클로저라고 할 수 있다.
• 클로저는 스코프를 통해 외부에서의 접근을 차단하는 것이 핵심이며, 이름이 클로저인 이유이기도 하다.
• JS는 함수가 선언 된 위치에 따라 스코프가 결정되는 렉시컬 스코프 방식이며, 그렇기에 자신이 선언 된 렉시컬 환경과 외부 렉시컬 환경을 참조할 수 있다.

클로저의 사용 예시

const Counter = (function () {
  var num = 0;

  return {
    increase() {
      return ++num;
    },
    decrease() {
      return --num;
    },
  };
})();

console.log(Counter.num); // undefined
console.log(Counter.increase()); // 1
console.log(Counter.increase()); // 2
console.log(Counter.decrease()); // 1
console.log(Counter.decrease()); // 0

• 전역 변수를 사용하지 않기에 안전성이 보장된다.
• 외부에서 해당 변수에 접근할 수 없기에 객체 지향 프로그래밍의 캡슐화와 은닉화를 이룰 수 있다.

References
"모던 자바스크립트 Deep Dive" .이응모
"
[JavaScript] 클로저(Closures)란 무엇일까?" .hanamon