[Javascript] 렉시컬 환경, 클로저

렉시컬 환경 (Lexical Environment)

렉시컬 환경은 코드의 block, function, script를 실행하기에 앞서 생성되는 특별한 객체로 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체입니다.

작동 방식

전체 스크립트와 관련이 있는 렉시컬 환경은 글로벌 렉시컬 환경입니다. 전역 코드가 시작되면 렉시컬 환경 객체가 만들어지고 코드를 실행하기 앞서 선언되어 있는 변수와 함수를 글로벌 렉시컬 환경 레코드에 저장합니다. 이때 저장 방식이 변수 또는 함수 선언 방식에 따라 차이가 있습니다.

 

- 변수가 var로 선언된 경우

var로 선언된 변수는 환경 레코드에 변수 이름을 key로 undefined를 value로 하여 초기화합니다. 이것은 코드를 실행시키기 전에 동작되는 과정으로 호이스팅이라고도 불리며 변수 선언이 상단으로 끌어 올려진 것처럼 보이는 것도 이 때문입니다. 그렇기 때문에 변수가 선언되기 전에 참조했을 때도 undefined라는 값을 가지는 것도 이 때문입니다.

 

- 변수가 let, const로 선언된 경우

let, const로 선언된 경우에는 환경 레코드에 변수 이름을 key로 <uninitialized>라는 상태를 value로 초기화 합니다. undefined와 달리 이 상태는 참조할 수 없는 값입니다. 그래서 이 변수가 선언된 라인에 도달하기 전에 변수를 참조하게 된다면 ReferenceError가 발생합니다. 변수가 선언이 되기 전까지의 영역은 Temporary Dead Zone이라고 불립니다.

 

클로저 (Closure)

클로저(Closure)는 함수를 객체로 취급하는 함수형 프로그래밍언어들에서 사용되는 특성입니다. 클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경과의 조합입니다.

 

// 클로저 예시
function makeCounter() {
  let count = 0;
  return function() {
    return count++;
  }
}

const counter = makeCounter();

makeCounter 함수의 호출이 시작될 때 렉시컬 환경이 만들어고 makeCounter 함수 실행에 필요한 변수(count)를 저장하게 됩니다.

makeCounter 함수가 실행되면서 리턴 함수가 만들어져 counter 변수에 저장이 되고 counter 변수를 호출하면 0을 리턴하게 됩니다. 즉 makeCounter에 있던 count 변수를 참조할 수 있습니다.

이것이 가능한 이유는 모든 함수는 [[Environment]]라는 내부 프로퍼티를 갖고 있고 이 프로퍼티는 함수가 만들어 질 때 그 함수를 둘러싼 렉시컬 환경에 대한 참조를 저장합니다.

해당 예시에서는 makeCounter 호출 시 counter.[[Environment]]에 makeCounter의 렉시컬 환경에 대한 참조를 저장하고 counter 변수를 호출시 counter의 렉시컬 환경이 생성됩니다.