호이스팅

🚩 호이스팅

선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 특징을 호이스팅이라 합니다.

🚩  var 호이스팅

console.log(score); // 변수 참조, undefined
var score = 7; // 변수 선언문

자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로, score가 참조되는 시점에는 아직 score 변수 선언이 실행되지 않아 참조 에러가 예상됩니다. 하지만 참조 에러가 발생하지 않고 undefined가 출력됩니다.

var는 선언과 초기화가 동시에 진행되기에 undefined로 초기화가 수행된다.

그 이유는 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 모든 선언문을 소스코드에서 찾아내 먼저 실행하기 때문입니다.

소스코드의 평가와 실행
모든 소스코드는 실행에 앞서 평가 과정을 거치며 코드를 실행하기 위한 준비를 한다. 즉 '소스코드의 평가'와 '소스코드의 실행' 과정으로 나누어 처리한다.

소스코드 평가: 실행 컨텍스트를 생성하고, 모든 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 키로 실행 컨텍스트가 관리하는 스코프(렉시컬 환경의 환경 레코드)에 등록한다.

소스코드 실행: 평가 과정이 끝나면 선언문을 제외한 소스코드가 순차적으로 실행되기 시작한다.


* 실행컨텍스트: 식별자를 등록하고 관리하는 스코프와 코드 실행 순서 관리를 구현한 내부 메커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다.
* 렉시컬 환경: 식별자와 식별자에 바인딩된 값, 그리고 상위 스코프에 대한 참조를 기록하는 자료구조로 실행 컨텍스트를 구성하는 컴포넌트. (코드가 어디서 실행되며 주변에 어떤 코드가 있는지)

 

소스코드 평가 과정에서 변수 선언만 실행 컨텍스트가 관리하는 스코프에 등록되어 undefined가 출력되었고,

값의 할당(score = 7)은 소스코드 실행 과정에서 실행됩니다.

console.log(score); // undefined
var score = 7; // 변수 선언(var score)과, 값의 할당(score = 7)

console.log(score); // 7

즉, 변수 선언과 값의 할당의 실행 시점이 다르다는 것입니다.

 

이 이유로 함수 표현식과 클래스 표현식은 호이스팅 되지 않습니다.

함수 선언문, 클래스 선언문은 호이스팅 됩니다.

a(); // 함수 선언문 호이스팅
function a() {
    console.log('함수 선언문 호이스팅')
}

// 함수 표현식
// Uncaught TypeError: calc is not a function
console.log(calc(10, 10));

var calc = function (a, b) {
  return a * b;
};

// 클래스 표현식
// Uncaught ReferenceError: Message is not defined
var msg = new Message('hello world');   
                                
console.log(msg);

class Message {
  constructor(message) {
    this.message = message;
  }
}

 

🚩 let, const 호이스팅

자바스크립트 ES6에서 도입된 let, const를 포함해서 모든 선언(var, let, const, function, function*, class)은 호이스팅합니다. 단, ES6에서 도입된 let, const, class를 사용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작합니다. 

 

var 키워드는 선언 단계와 초기화 단계가 한번에 진행되어 참조에러가 발생하지 않는데,

let, const 키워드를 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행됩니다.

 

그래서 초기화 단계가 실행되기 전에 변수에 접근하려면 참조 에러가 발생합니다. 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대(Temporal Dead Zone, TDZ)라고 부릅니다.

// 런타임 이전에 선언 단계가 실행, 아직 변수 초기화가 되지 않았습니다.
// 일시적 사각지대에서는 변수를 참조할 수 없습니다.
console.log(foo); // ReferenceError: foo is not defined

let foo; // 변수 선언문에서 초기화 단계가 실행됩니다.
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행됩니다.
console.log(foo); // 1

 

let 키워드로 선언한 변수가 호이스팅이 발생하지 않는다면 아래 코드는 전역 변수 foo의 값을 출력해야 합니다.

하지만 let 키워드로 선언한 변수도 여전히 호이스팅이 발생하기 때문에 참조 에러가 발생합니다.

let foo = 1; // 전역 변수

{
  console.log(foo); // ReferenceError: Cannot access 'foo' before initialization
  let foo = 2; // 지역 변수
}

 

🚩 참고

• 모던 자바스크립트 Deep Dive 4장
• 모던 자바스크립트 Deep Dive 23장
• 모던 자바스크립트 Deep Dive 15장