자바스크립트 (클로저)

클로저를 되게 복잡한 개념으로 생각하고 있었다.
하지만 클로저는 함수 내부에 선언된 함수라는 개념을 잡고 이해하면 쉽다.

1. 클로저는 무엇인가?

클로저는 자바스크립트 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(Functional Programming language)에서 사용되는 중요한 특성이다.

클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다. 즉, 내부함수는 클로저이다.

function outerFunc() {
  var x = 10; // 자유변수
  var innerFunc = function () { console.log(x); };
  return innerFunc;
}

/**
 *  함수 outerFunc를 호출하면 내부 함수 innerFunc가 반환된다.
 *  그리고 함수 outerFunc의 실행 컨텍스트는 소멸한다.
 */
var inner = outerFunc();
inner(); // 10

2. 클로저는 상태관리에 사용된다

 var toggle = (function () {
      var isShow = false; // 자유변수

      // ① 클로저를 반환
      return function () {
        box.style.display = isShow ? 'block' : 'none';
        // ③ 상태 변경
        isShow = !isShow;
      };
    })();

위 코드를 보면 즉시실행 함수를 변수 toggle에 할당하여 isShow라는 변수를 전역 스코프로부터 숨겨 전역 스코프의 오염을 방지하고 있다.
이렇게 자유변수는 외부에서 직접 접근할 수 없는 private 변수이므로 전역 변수를 사용했을 때와 같이 의도되지 않은 변경을 걱정할 필요도 없기 때문이 보다 안정적인 프로그래밍이 가능하다.

3. 외부함수는 동일하나 내부함수가 다를 경우 독립된 렉시컬 환경을 갖는다

// 함수를 인자로 전달받고 함수를 반환하는 고차 함수
// 이 함수가 반환하는 함수는 클로저로서 카운트 상태를 유지하기 위한 자유 변수 counter을 기억한다.
function makeCounter(predicate) {
  // 카운트 상태를 유지하기 위한 자유 변수
  var counter = 0;
  // 클로저를 반환
  return function () {
    counter = predicate(counter);
    return counter;
  };
}

// 보조 함수
function increase(n) {
  return ++n;
}

// 보조 함수
function decrease(n) {
  return --n;
}

// 함수로 함수를 생성한다.
// makeCounter 함수는 보조 함수를 인자로 전달받아 함수를 반환한다
const increaser = makeCounter(increase);
console.log(increaser()); // 1
console.log(increaser()); // 2

// increaser 함수와는 별개의 독립된 렉시컬 환경을 갖기 때문에 카운터 상태가 연동하지 않는다.
const decreaser = makeCounter(decrease);
console.log(decreaser()); // -1
console.log(decreaser()); // -2

참고
자바스크립트의 기본
JS Execution Context (실행 컨텍스트) 란?