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

console.log(score); // undefined

var score; // 변수 선언문

변수 선언문보다 변수를 참조하는 코드가 있다.

자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되므로 console.log(score) 가 먼저 실행되고 순차적으로 다음 줄에 있는 코드를 실행한다.

console.log(score) 가 실행되는 시점에 score 변수는 선언이 되지 않은 시점이므로 참조 에러가 발생할 것처럼 보이지만 참조 에러가 발생하지 않고 undefined 가 출력된다.

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

자바스크립트 엔진은 소스코드를 순차적으로 실행하기 이전에 소스코드의 평가과정을 거치면서 소스코드를 실행하기 위한 준비를 한다.

이 때 평가과정에서 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아내 "먼저 실행" 한다.

그리고 소스코드의 평가 과정이 끝나면 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행한다.

순서대로 정리하면 다음과 같다.

• 평가 단계에서 코드에서 선언문을 찾아 먼저 실행
• 평가 단계가 끝나면 평가 단계에서 실행했던 선언문을 제외하고 나머지 소스코드를 순서대로 실행

즉, 자바스크립트는 변수 선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행한다.
👉 변수 선언이 소스코드의 어디에 위치하는지와 상관없이 어디서든지 변수를 참조할 수 있다.

📒 변수 호이스팅 (variable hosting)

변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라 한다.
변수 선언뿐 아니라 var, let, const, function, function*, class키워드를 사용해서 선언하는 모든 식별자(변수, 함수, 클래스 등)는 호이스팅된다. 모든 선언문은 런타임 이전 단계에서 먼저 실행되기 때문이다.

---

👀 참조

• 모던 자바스크립트 Deep Dive