[JavaScript] 호이스팅 (Hoisting) 예제

호이스팅(Hoisting)

스코프 안에 있는 선언들을 모두 스코프의 최상위로 끌어올리는 것이다.

선언문들을 미리 실행하는 것이라 생각하면 된다. 실제 메모리에서는 변화가 없다.

 

var 키워드나 함수 선언문 같은 경우는 코드 실행 전 자바스크립트 내부에서 미리 변수를 선언하고 undefined로 초기화를 해놓는다.

 

let 키워드, const 키워드와 함수 표현식도 호이스팅이 발생하긴 하나 변수를 선언만 해놓을 뿐 초기화하지 않는다. 초기화는 변수 선언문을 만났을 때 수행한다.

이때 선언과 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 구간을 Temporal Dead Zone(TDZ)이라 한다.

 

예제 1

console.log(typeof(funcHello));
console.log(typeof(funcBye));

function funcHello() {
	console.log('hello');
}

var funcBye = function() {
	console.log('bye');
}

funcHello()는 함수 선언문이고, funcBye()는 함수 표현문(그 중에서도 익명 함수)이다.

함수 선언문인 funcHello()는 type이 function으로 올바르게 출력되지만, 함수 표현문인 funcBye()는 undefined라고 출력된다.

 

위 코드가 내부적으로는 아래와 같은 코드가 된다.

function funcHello() {
	console.log('hello');
}

var funcBye = undefined;

console.log(typeof(funcHello());
console.log(typeof(funcBye());

funcBye = function() {
	console.log('bye');
}

 

예제 2

console.log(num);
var num;
num = 3;
console.log(num);

var viewNum = function() {
	console.log(num); // undefined
	var num;
	num = '100';
	console.log(num);
}

viewNum();

예제 2는 호이스팅이 발생할 때 문제점을 제대로 보여주는 예이다.

 

viewNum() 함수에서는 전역 변수인 num을 출력하려고 했지만, viewNum() 함수 내에서도 num 변수가 선언되었기 때문에 함수 안에서 선언된 지역 변수 num을 인식하여 undefined를 출력하는 것이다.

 

물론 실제로 코딩 할 땐 저렇게 변수명을 똑같이 두면 안된다.

 

호이스팅이 발생했을 때 내부적으로는 아래와 같은 코드가 된다.

var num = undefined;
var viewNum = undefined;

console.log(num) // undefined

num = 3
console.log(num) // 3

viewNum = function() {
    var num = undefined;
    
    console.log(num);
    num = 100
    console.log(num);
}

viewNum()