[JS] 자바스크립트 변수 호이스팅(hoisting) 쉽게 이해하기

자바스크립트는 인터프리터 언어여서 코드가 한줄 씩 순차적으로 실행된다고 생각하지만 소스 코드가 실행되는 런타임전에 자바스크립트 엔진에서 변수 선언이 먼저 실행된다.

변수 호이스팅이란

호이스팅이란 끌어올린다는 뜻이다. 즉 변수를 위로 끌어올려서 먼저 실행시킨다는게 변수 호이스팅이다.

 

아래 예제 처럼 score 변수 선언 없이 그냥 출력하려고 하면 ReferenceError가 발생한다.

console.log(score); //ReferenceError: score is not defined

 

아래 예제 에서는 출력문 밑에 score 변수를 선언하고 위에서 score를 출력 했지만 변수에 아무값도 할당하지 않은 값 undefiend가 출력 되었다. 

console.log(score); //undefiend

var score;

이처럼 변수 선언문이 코드의 맨 위에서 끌어 올려진 것처럼 동작하는 특징이 변수 호이스팅이다. 

 

 

그러면 아래 처럼 score 변수를 아래에서 선언하고 위에서 값을 할당할수 있게 되는 것이다.

console.log(score); //undefiend

score = 80;
var score;

console.log(score); //80

맨위에 score는 undefiend가 나왔다. 그 이유는 변수 선언만 hosting 되는 것이지 값의 할당은 소스코드 순차적으로 실행되는 시점인 런타임에 실행된다.

 

만약에 변수선언과 동시에 값을 할당하면 어떻게 될까?  아래 결과를 보면 알겠지만 변수 선언과 값의 할당을 2개의 문으로 나누어 지고 변수 선언문만 hosting되고 값의 할당은 코드 순차적으로 실행된다.

console.log(score); //undefiend

var score = 80;

console.log(score); //80