변수 선언의 실행 시점과 변수 호이스팅

이상한 자바스크립트

console.log(score); // undefined
var score; // 변수 선언문

해당 코드는 참조 에러(ReferenceError)가 발생할 것처럼 보이지만 실제로는 undefined를 출력한다. 그 이유는 소스코드가 인터프리터에 의해 한 줄씩 순차적으로 실행되지만(Runtime), 변수 선언은 그 이전 단계에서 먼저 실행되기 때문이다. 다른 언어의 입장에서 보면 상당히 이상한 언어다.

자바스크립트 엔진의 동작 순서

이런 이상한 일이 발생되는 이유는 자바스크립트 엔진의 동작 순서에 있는데, 순서는 다음과 같다.

1. 소스코드의 평가 과정을 거치면서 소스코드를 실행하기 위한 준비를 한다.
2. 소스코드의 평과 과정에서 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 먼저 실행한다.
3. 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행한다.

호이스팅

이러한 자바스크립트 엔진의 특성으로 인해 변수 선언의 위치와 상관없이 어디서든지 변수를 참조할 수 있다. 그리고 이처럼 변수 선언문의 위치와 상관없이 코드의 최상단으로 끌어 올려진 것처럼 동작하는 자바스크립트의 특징을 변수 호이스팅이라고 한다.
모든 식별자(변수, 함수, 클래스 등)는 호이스팅된다. 모든 선언문은 런타임 이전 단계에서 먼저 실행되기 때문이다. 하지만 let과 const와 같은 키워드로 선언된 값들이 호이스팅 되지 않는 것처럼 보이는 특징이 있다.