클로저란 쉽게 말하면 ‘이미 생명 주기가 끝난 외부함수의 변수를 참조하는 함수’ 를 클로저라고 한다.

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

  return innerFunc;
}

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

위의 예제를 보면 innerFunc 는 outerFunc 가 끝난 후 실행되는데 이는, outerFunc 실행 컨텍스트가 사라진 후 innerFunc 실행 컨텍스트가 생성되는 것이다. 이때 outerFunc 실행 컨텍스트는 사라졌지만, outerFunc 의 변수 객체는 남아있고 innerFunc 의 스코프 체인으로 참조하는데 이것이 클로저다.

위의 예제에서는 outerFunc 의 x 를 참조하는 innerFunc 가 클로저가 되고, 클로저가 참조되는 외부 변수(x) 와 같은 변수를 자유변수라 한다.

function outerFunc() {
  let x = 10; //자유변수
  return function () {
    //x와 arguments 를 활용한 로직. 클로저
  };
}

let inner = outerFunc();
//outerFunc 실행 컨텍스트 끝
inner(); //10

아래 예제를 살펴보자

function outerFunc(a, b) {
  let local = 5;
  function innerFunc(innerA) {
    console.log(a + b + innerA + local);
  }

  return innerFunc;
}

let ex1 = outerFunc(2, 3);
ex1(1); //= innerFunc(1)

outerFunc 를 호출했을 때 반환되는 함수 객체인 innerFunc 가 ex1 으로 참조되는데 그래서 ex1(1) 의 형태로 실행될 수 있는 것이다.

outerFunc 가 실행되며 생성된 변수객체가 스코프 체인에 들어가고, 이 체인은 innerFunc 의 스코프 체인으로 참조된다. 즉, outerFunc 가 종료되었지만 여전히 내부함수의 스코프체인으로 참조되므로 가비지컬렌션의 대상이 되지 않고 접근이 가능하도록 살아 있는 것이다.