[JavaScript] 클로저(Closure)란?

클로저(Closure)란?

“클로저는 자신이 생성될 때의 환경(렉시컬 환경)을 기억하는 함수이다.”

위의 클로저의 개념을 이해하기 위해서는 먼저 “Lexical Environment”가 무엇인지 알고있어야 한다.

렉시컬 환경(Lexical Environment)이란?

코드를 작성하는 스크립트에는 “렉시컬 환경”이라고 하는 “내부 숨김 연관 객체(Internal Hidden Associated Object)”가 있다.

여기서 내부 숨김 연관 객체는 물리적으로 존재하는 것이 아닌 스크립트가 어떻게 동작하는지 설명하는 이론상의 객체이다.

렉시컬 환경에 대한 개념이 어느정도 잡혔다면, 비로소 클로저를 이해할 수 있을 것 이다.

“클로저는 자신이 생성될 때의 환경(렉시컬 환경)을 기억하는 함수이다.”

더 쉽게 설명하자면 클로저는 중첩된 함수에서 내부함수를 뜻하고, 외부함수의 변수를 기억하고 그 변수에 접근할 수 있다.

자바스크립트의 모든 함수는 [[Environment]]라는 숨김 프로퍼티를 갖는데, 여기에 함수가 생성된 위치와 그곳의 렉시컬 환경에 대한 정보가 저장된다.

이 숨김 프로퍼티를 이용하여 외부 함수의 변수에 접근하는 것이다.

또한 자바스크립트의 모든 함수는 [[Environment]]를 갖기 때문에 모두 클로저가 될 수 있다.

아래 코드를 통해 클로저가 어떻게 쓰였는지 확인해보자.

• 클로저를 이용한 카운트 함수

function makeCounter(){ // 외부함수
  var count = 0; // 외부변수
  return function(){ // 내부함수
    return ++count;
  };
}

var counter = makeCounter(); // 내부함수 객체를 반환하여 변수 counter에 대입

console.log(counter()); // 내부함수 호출1
console.log(counter()); // 내부함수 호출2
console.log(counter()); // 내부함수 호출3

counter = null; // 메모리에서 렉시컬 환경 삭제

// Expected Output:
// 1
// 2
// 3

해당 포스트는 추후 계속해서 업데이트 될 예정입니다.

참고: PoiemaWeb - 클로저(Closure)