호이스팅

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

console.log(score); // undefined

var score; // 변수 선언문

위의 예제를 보면 변수 선언문보다 변수를 참조하는 코드가 앞에 있다. 자바스크립트 코드는 인터프리터에 의해 한줄씩 순차적으로 실행되므로 console.log(score); 가 가장 먼저 실행되고 순차적으로 다음 줄에 있는 var scroe;를 실행한다. 따라서 console.log(score); 가 실행되는 시점에는 score 변수의 선언이 실행되지 않았으므로 참조 에러가 발생할 것으로 보인다. 하지만 참조 에러가 발생하지 않고 undefined가 출력된다.

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

자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서 먼저 소스코드의 평가 과정을 거치면서 소스코드를 실행하기 위한 준비를 한다. 이때 소스코드 실행을 준비 단계인 소스코드의 평가 과정에서 자바스크립트 엔진은 변수 선언을 포함한 모든 선언문을 소스코드에서 찾아서 먼저 실행한다. 그리고 소스코드의 평가 과정이끝나면 비로소 변수 선언을 포함한 모든 선언문을 제외하고 소스 코드를 한 줄씩 순차적으로 실행한다.

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

위의 예제는 변수 선언이 소스코드가 순차적으로 실행되는 런타임 이전 단계에서 먼저 실행된다는 증거이다. 이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라 한다.

사실 변수 선언뿐 아니라 var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅된다.

var, let, const 차이

var는 함수레벨 스코프를 따른다.

중복선언 시에도 에러가 발생하지 않는다.

var함수를 사용하면 변수의 사용 범위가 넓어지므로 의도치않은 변수의 변경등의 문제가 발생한다.

그래서 ES6부터는 let, const 라는 키워드가 등장했다.

let, const는 블록레벨 스코프를 따르고, 변수의 중복 선언이 불가능하다.

let은 재할당이 가능하고, const는 재할당이 불가능하다.

그리고 호이스팅에서도 var와 let, const는 차이가 있다

var는 변수 호이스팅이 일어나면 선언과 초기화단계가 같이 일어나기때문에 변수가 실제로 선언된 위치 이전에서 변수를 호출하더라고 오류가 나지 않고 undefined가 출력된다.

하지만 let, const는 변수 호이스팅이 일어나긴하지만 변수의 선언과 초기화 단계가 따로 이루어지기 때문에 변수가 실제로 선언된 위치 이전에서 호출을 하게 되면 오류가 발생한다. 초기화를 하는 단계에서 메모리에 할당되는 것이기 때문에 초기화 전에 참조하면 에러가 난다.