[4-4] 변수 선언의 실행 시점과 변수 호이스팅

console.log(score);
var score;

변수 선언문보다 변수를 참조하는 코드가 앞에 있는 경우 : 자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행됨

→ console.log(score)가 가장 먼저 실행됨

→ 순차적으로 다음 줄에 있는 코드를 실행함

• console.log(score)가 실행되는 시점에는 아직 score변수의 선언이 실행되지 않았음으로 참조 에러가 발생할 것으로 보인다
• 그러나 참조 에러가 발생하지 않고 undefined 가 출력된다

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

자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서 먼저 소스코드의 평가 과정을 거침

→ 소스코드 실행을 위한 준비 단계인 소스코드의 평가 과정에서 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문 (변수 선언문, 함수 선언문 등) 을 소스코드에서 찾아내 먼저 실행한다

→ 이 과정이 끝나면 비로소 변수 선언을 포함한 모든 선언문을 제욓사고 소스코드를 한 줄씩 순차적으로 실행하는 것이다.

 

💡 자바스크립트 엔진 : 변수선언이 소스코드의 어디에 있든 상관없이 다른 코드보다 먼저 실행됨. → 변수 선언이 소스코드 어디에 위치하는지와 상관없이 어디서든지 변수를 참조할 수 있음

 

변수 선언문인 var score; 보다 변수를 차조하는 코드인 console.log(score);가 앞에 있음

만약 코드가 순차적으로 실행되는 런타임에 변수 선언이 실행된다면?

→ console.log(score);가 실행되는 시점에는 아직 변수가 선언되기 이전임

→ 위 코드를 실행하면 참조 에러가 발생해야 하는데 그냥 undefined가 출력됨

→ 이는 변수 선언이 소스코드가 순차적으로 실행되는 런타임 이전 단계에서 먼저 실행된다는 증거이다.

호이스팅

→ 이처럼 변수 선언문의 코드의 앞부분으로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징

→ var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅된다.