Variable hoisting

Hoisting(호이스팅) 이란

변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 말함. 변수뿐 아니라 키워드를 사용해서 선언하는 모든 식별자는 호이스팅 된다. 즉 변수 선언이 소스코드의 어디에 위치하는지와 상관 없이 어디서든지 변수를 참조할 수 있다.

변수 선언?

변수를 사용하려면 반드시 선언이 필요, 변수를 선언할 때는 var, let, const 키워드를 사용한다.

자바스크립티의 런타임과 실행단계

자바스크립트는 소스 코드를 한줄씩 실행하는 런타임 전의 실행 단계에서 소스 코드의 평가 과정을 거친다. 그 과정에서 변수 선언, 함수 선언문을 먼저 실행한다.

var

var 키워드를 사용한 변수 선언은 런타임 이전에 선언 단계와 초기화 단계가 동시에 진행된다. 암묵적으로 undefined를 할당해 '초기화' 한다.

//변수 선언보다 변수 참조가 먼저 일어났기 때문에 참조 에러를 
발생시킬것 같지만 undefined를 뱉는다.

console.log(hoistingEx01);
var hoistingEx01;
// undefined

let, const

반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않는다.

//let 변수는 초기화하기 전에는 읽거나 쓸 수 없다.
console.log(hoistingEx02);
let hoistingEx02;
// Uncaught ReferenceError: hoistingEx02 is not defined

console.log(hoistingEx03);
const hoistingEx03;
// Uncaught SyntaxError: Missing initializer in const declaration

선언만 호이스팅

반면, 다음 예제는 선언 없이 초기화만 존재. 따라서 호이스팅도 없고, 변수를 읽으려는 시도에서는 ReferenceError 예외가 발생.

console.log(num); // ReferenceError
num = 6; // 초기화

요약

선언 단계: 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.

초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화 한다.

var : 런타임 이전에 선언과 초기화 단계가 이루어지고, 런 타임 과정에서 할당이 일어난다.

let, const : 실행 단계에서 선언만 이루어지고, 런 타임 과정에서 초기화 후 새로운 메모리를 확보하여 할당할 값을 저장한다.
그리고 초기화 단계에서 undefined가 저장 되어있는 주소값을 할당값이 저장된 주소값으로 교체하여 할당 단계가 이루어진다.

Related topic

#Scope