클로저 (Closure)

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

스코프는 함수를 호출할 때가 아니라 함수를 어디에 선언하였는지에 따라 결정된다. 이를 렉시컬 스코핑(Lexical scoping)라 한다.

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

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

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

함수 outerFunc는 내부함수 innerFunc를 반환하고 생을 마감


즉, 함수 outerFunc는 실행된 이후 콜스택(실행 컨텍스트 스택)에서 제거 되었으므로함수 outerFunc의 변수 x 또한 더이상 유효하지 않게 되어 변수 x에 접근할 수 있는 방법은 달리 없어 보임.


그러나 위 코드의 실행 결과는 변수 x의 값인 10이다.


이미 종료되어 실행 컨텍스트 스택에서 제거된 함수 outerFunc의 지역변수 x가 다시 부활이라도 한 듯이 동작하고 있다.


이처럼 자신을 포함하고 있는 외부함수보다 내부함수가 더 오래 유지되는 경우, 외부 함수 밖에서 내부함수가 호출되더라도 외부함수의 지역 변수에 접근할 수 있는데 이러한 함수를 클로저(Closure)라고 부르는 것이다.

---

추가 - 화살표 함수

arrow function을 사용하면 함수표현식으로 함수를 정의할 때보다 간략하게 함수를 정의할 수 있다.

// 함수표현식
const subtract = function (x, y) {
	return x - y;
}
// 화살표 함수
const subtract = (x, y) => {
	return x - y;
}
// const subtract = (x, y) => x - y;
console.log(subtract(14, 2));		// 12

1. 매개변수가 한 개일 때, 소괄호()를 생략할 수 있다.

2. 함수 코드 블록 내부가 하나의 문으로 구성되어 있다면 중괄호{}를 생략할 수 있다. 이때 코드 블록 내부의 문이 값으로 평가 될 수 있으면 return 키워드를 생략할 수 있다.

---

회고

어제부터 클로저가 무엇인지, 어떻게 작동하고 어떻게 효율적으로 사용하는지에 대해서 공부해보았다. 이제는 이해가 좀 된것 같은데 또 아직 어색한거 같다.
..아직 이해가 안된걸지도?

다음에는 마찬가지로 헷갈리는 실행 컨텍스트와 this 에 대해서 정리해 볼것이다.