[FP] - JS 클로저

앞으로 다룰 내용에서 클로저가 자주 등장할 예정입니다. 따라서 먼저 클로저에 대해 간단하게 다루고 넘어가겠습니다.

클로저(closure)는 함수를 일급 객체로 취급하는 언어에서 다루는 내용으로 MDN에서 다음과 같이 정의하고 있습니다.

“A closure is the combination of a function and the lexical environment within which that function was declared.”

클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합이다.

MDN

어려운 내용은 모던 자바스크립트 딥다이브나 You Don’t Know JS와 같은 명서에 떠넘기고 간단하게 알아보겠습니다.

function foo() {
  let i = 0;
 
  return function bar() {
    i++;
    return console.log(i);
  };
}
 
const bar = foo();
 
bar(); // 1
bar(); // 2

예시 코드를 살펴보면 foo()는 bar()를 반환합니다. 이때 bar()는 외부 변수 i에 접근합니다. bar()가 호출될 때마다 i는 그 함수의 렉시컬 환경에 저장되며 bar() 함수는 이 환경을 기억하여 클로저를 형성합니다.

스코프는 함수를 호출할 때가 아니라 함수를 어디에 선언하였는지에 따라 결정된다. 이를 **렉시컬 스코핑(Lexical scoping)**라 한다. 위 예제의 함수 innerFunc는 함수 outerFunc의 내부에서 선언되었기 때문에 함수 innerFunc의 상위 스코프는 함수 outerFunc이다. 함수 innerFunc가 전역에 선언되었다면 함수 innerFunc의 상위 스코프는 전역 스코프가 된다.

-모딥다-

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

내부 함수가 유효한 상태에서 외부함수가 종료해도 내부 함수에서 해당 외부 함수 실행 컨텍스트 내의 활성 객체가 내부 함수에 의해 참조되는 상태이기 때문에 내부 함수가 외부함수의 스코프 체인을 통해 참조할 수 있는 상태입니다.

클로저는 앞으로 자주 사용될 패턴이기 때문에 매우 중요합니다. 클로저에 대해서 더 자세한 내용은 여러 책이나 블로그에서 다루고 있으므로 생략하겠습니다.