클로저(closure)

클로저란 특정 함수가 선언될 때 해당 함수의 렉시컬 환경을 기억하는 함수를 의미한다.

여기서 만약 렉시컬 환경을 모른다면 이전의 '실행 컨텍스트(Execution context)와 스코프체인(scope chain)' 페이지를 읽고 관련 용어를 이해한 후에 클로저 게시물을 읽기를 권장한다.

 

일단 코드를 통해 클로저를 설명하고자 한다.

 

function myAge(){
  let age = 10;
  return {
    subtract : function(){age--;},
    lookup : function(){return age;}
  };
};

const addAge1 = myAge()
const addAge2 = myAge()

addAge1.subtract()
addAge1.subtract()

console.log(addAge1.lookup())
console.log(addAge2.lookup())

위의 코드를 실행시키면 결과는 다음과 같다.

8
10

 

위 변수 addAge1와 addAge2라는 전역 변수에 myAge()라는 공통의 함수를 호출하여 할당하였다.

하지만 각 전역 변수가 접근하는 age라는 로컬 변수는 같은 실행 컨텍스트 내의 로컬변수 age에 접근하는 것이 아닌 각각 독립된 실행컨텍스트에서 렉시컬 환경에 있는 age 로컬 변수에 접근하는 것이다.

이로 인해 모두 8을 호출하는 것이 아닌  각각 다른 실행컨텍스트의 렉시컬 환경의 환경 레코드에서 age에 접근하였기 때문에 각기 다른 값이 나온 것이다.

 

정리하자면 이러한 원리는 각각 독립된 실행컨텍스트와 클로저때문이다.

 

subtract 함수와 lookup 함수가 선언될 때의 렉시컬 환경은 myAge 함수의 실행 컨텍스트다.

이때 subtract 함수와 lookup 함수는 같은 myAge 함수의 실행 컨텍스트에 접근할 수 있는 클로저가 되는 것이다.

 

그리고 새로운 변수인 addAge1과 addAge2가 선언되면 각각 독립된 myAge 실행컨텍스트를 참조하는 실행컨텍스트를 생성한다.

 

위 코드를 그림으로 나타내면 다음과 같다.

 

addAge1가 subtract 클로저에 접근을 하고 이제 subtract 클로저는 age라는 로컬 변수에 접근하는데 이때 두번 접근하므로 age 변수의 값은 총 -2만큼 감소된다.

 

한편 addAge2는 addAge1이 참조하는 myAge의 렉시컬 환경에는 접근할 수 없으므로 addAge2가 접근하는 age변수의 값은 10에서 아무 변화가 일어나지 않는 것이다.