렉시컬 환경과 호이스팅

Variable Environment와 Lexical Environment

Variable Environment는 실행 컨텍스트의 하위 컴포넌트 중 하나로, 현재 컨텍스트 내의 식별자들에 대한 정보와 외부 환경에 대한 정보를 담고 있습니다.
실행 컨텍스트가 생성될 때, Variable Environment에 정보들을 담은 다음, 이것을 Lexical Environment에 복사합니다.

렉시컬 환경(Lexical Environment)

LexicalEnvironment는 어휘적 환경이라고도 불리며, VariableEnvironment의 snapshot, 즉 순간의 정보를 담고 있습니다.
이 LexicalEnvironment는 실시간으로 변경사항이 반영됩니다.

환경 레코드와 호이스팅

환경 레코드(Environment Record) 에는 현재 컨텍스트 내의 식별자들에 대한 정보와 외부 환경에 대한 정보가 담겨 있습니다.

자바스크립트 엔진은 코드를 실행하기 전, 실행 컨텍스트를 순차적으로 훑어보며 선언문을 찾아 환경 레코드에 저장합니다.
결국 자바스크립트 엔진은 코드를 실행하기 전에 해당 환경의 변수명을 미리 알고 있는 셈입니다.
이것을 호이스팅(Hoisting) 이라고 합니다.

변수의 호이스팅

호이스팅 (hoisting)이라는 용어는 사전적으로 '들어올리다'라는 뜻을 가지고 있습니다.
자바스크립트에서는 코드를 실행하기 전, 선언문을 끌어올려서 처리하는 것을 의미합니다.

아래는 호이스팅 과정을 보여주는 코드입니다.

function a(x) {   // 수집 대상 1(매개변수)
  console.log(x); // (1)
  var x;          // 수집 대상 2(변수 선언)
  console.log(x); // (2)
  var x = 2;      // 수집 대상 3(변수 선언)
  console.log(x); // (3)
}
a(1);

이제 호이스팅이 되었으니, 코드를 실행할 차례입니다.

• 2번째 줄에서는 변수 x를 선언합니다.
• 3번, 4번째 줄에서는 변수 x를 선언합니다. 이때, 이미 선언된 변수 x가 있으므로 무시합니다.
• 6번째 줄에서는 변수 x에 1을 할당합니다. 실제로는 1을 메모리 값 저장공간에 담고, 변수 x에 그 주소를 할당합니다.
• 7번, 8번줄에서는 변수 x에 할당된 값을 출력합니다. (1) (2) 모두 1이 출력됩니다.
• 9번째 줄에서는 변수 x에 2를 할당합니다. 숫자 2를 별도의 메모리에 저장하고, 변수 x에 그 주소를 할당합니다.
• 10번째 줄에서는 변수 x에 할당된 값을 출력합니다. 2가 출력됩니다.
• 모든 코드가 실행되었으므로, 실행 컨텍스트가 콜 스택에서 제거됩니다.

함수의 호이스팅

function a() {
  console.log(b);   // (1)
  var b = 'bbb';    // 수집 대상 1(변수 선언)
  console.log(b);   // (2)
  function b () {}  // 수집 대상 2(함수 선언)
  console.log(b);   // (3)
}
a();

이제 호이스팅이 끝났으니 함수를 실행해봅시다.

• 2번째 줄에서는 변수 b를 선언합니다.
• 3번째 줄에서는 함수 b를 다시 선언합니다. 이때, 식별자 b는 이미 메모리에 담겨있으므로 선언과정은 무시됩니다.
  그러나 함수는 별도의 메모리에 저장되고, 변수 b에 그 주소를 할당합니다.
• 5번째 줄에서는 변수 b에 할당된 값을 출력합니다. ƒ b () {}가 출력됩니다.
• 6번째 줄에서는 변수 b에 'bbb'를 할당합니다. 문자열 'bbb'를 별도의 메모리에 저장하고, 변수 b에 그 주소를 할당합니다.
• 7번, 8번째 줄에서는 변수 b에 할당된 값을 출력합니다. 모두 'bbb'가 출력됩니다.
• 모든 코드가 실행되었으므로, 실행 컨텍스트가 콜 스택에서 제거됩니다.

function a() {
  console.log(b); // (1)
  var b = 'bbb';
  function b () {};
}
a();

함수 선언문과 함수 표현식

함수 선언문(function declaration)과 함수 표현식(function expression)은 함수를 정의할 때 사용하는 두가지 방식입니다.

  function a() { }
  a();

함수 선언문과 함수 표현식은 호이스팅 과정에서 다르게 동작합니다.
함수 표현식은 기본적으로 변수에 함수를 할당하는 것이므로, 변수명이 호이스팅되고 함수는 변수에 할당되어야 합니다.
반면 함수 선언문은 함수 전체가 호이스팅되기 때문에, 함수 선언문을 코드의 어디에 작성하든 상관없이 함수를 사용할 수 있습니다.