Closure

✅클로저(Closure)란?

클로저는 자바스크립트 고유의 개념이 아니므로 ECMAScript 명세에 클로저의 정의가 등장하지 않는다.

클로저에 대해 MDN은 아래와 같이 정의하고 있다.

“A closure is the combination of a function and the lexical environment within which that function was declared.”
클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다.

무슨 의미인지 잘 와 닿지 않는다.

위에서 중요한 키워드는 “함수가 선언됐을 때의 렉시컬 환경(Lexical environment)”이다.

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

outerFunc(); // 10

함수 outerFunc 내에서 내부 함수 innerFunc가 선언되고 호출되었다. 이때 내부함수 innerFunc는 자신을 포함하고 있는 외부 함수 outerFunc의 변수 x에 접근할 수 있다. 이는 함수 innerFunc가 함수 outerFunc의 내부에 선언되었기 때문이다.

전에 잠시 배웠던 Scope는 함수를 호출할 때가 아닌 선언할 때, 결정 된다고 했다. 함수는 기존에 선언되어 있던 환경을 기준으로 변수를 조회한다.(안쪽 scope에서 바깥쪽 scope로 하나씩 하나씩 참고하면서 나간다!)

이를 Lexical Scoping(어휘적 환경)이라고 한다!

이러한 함수의 특성에 따라서 클로저는 내부 함수가 외부 함수의 변수에 접근할 수 있게 된다.

innerFunc는 함수 outerFunc의 내부에서 선언되었기 때문에 함수 innerFunc의 상위 스코프는 함수 outerFunc이다. 함수 innerFunc가 전역에 선언되었다면 함수 innerFunc의 상위 스코프는 전역 스코프가 된다.

---

사실 적으면서도 아직까지도 뭔 말인지 모르겠다. 그래서 Closure가 뭐냐?!

클로저는 외부함수의 변수에 접근할 수 있는 내부 함수를 뜻한다.
외부함수의 실행이 종료된 후에도, 클로저(내부 함수)는 외부 함수의 스코프를 참조할 수 있다.

클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말한다.

 

이를 조금 더 간단히 말하면 클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다