변수 호이스팅과 값의 할당

변수 호이스팅

• 모든 프로래밍 언어를 배울 때, 가장 먼저 배우는 것 중에 하나가 변수 선언일 것이다.
• JavaScript는 변수 선언이 좀 특이하다.
• 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아닌 그 전 단계에서 먼저 실행된다.

console.log(score); //undefined

var score;

• 이 코드에서 console.log의 결과는 undefined가 나오게된다.
• 보통의 프로그래밍 언어라면 에러가 났을거지만, JS 엔진은 런타임 전에 소스코드의 평가 과정을 거치면서 런타임 준비를 한다.
• JS 엔진은 모든 선언문(변수, 함수 등)을 찾아 런타임 전에 먼저 실행한다. 
• 변수 선언이 소스코드의 어디에 위치하든 어디서든지 변수를 참조할 수 있다!

=> 이렇게 변수 선언문이 런타임 전에 실행되는 것을  변수 호이스팅(variable hoisting)이라고 한다.

값의 할당

위에서 JS 엔진이 변수를 어느 시점에서 선언하는지를 알아봤다. 이제는 값의 할당이 어느 시점에 일어나는지 알아보고자 한다.

var score; // 변수 선언
score = 80; // 값의 할당

보통 위 코드처럼 변수를 선언하고 할당한다.

var score = 80;

• 한 줄로 표현해도 JS 엔진은 첫번째 코드처럼 선언과 할당으로 나눠서 실행을 한다.
• 이 부분이 중요한 이유는 선언과 할당이 나눠져서 된다는 것이다.
• 선언은 런타임 전에 된다.

그렇다면 값의 할당은 어느 타이밍에 될까?

=> 값의 할당은 런타임 시점에서 실행된다!

 

console.log(score); //undefined;

var score;
score = 80;

console.log(score); // 80

따라서 이 코드에서는 값이 할당되기 전과 후의 console.log 결과가 달라진다.

 

문제

console.log(score); // undefined

score = 80;
var score;

console.log(score); //??

그렇다면 이 코드의 마지막 console.log의 결과는 어떻게 될까?

답은 변수 호이스팅으로 인해 score 변수가 먼저 선언되고 런타임 시 80이 score에 할당되어 80이 출력된다.