Hoisting과 TDZ(Temporal Dead Zone)

1. Hoisting이란?

Javascript 코드가 실행될 때 각 구역(Scope)에 있는 var, function 등으로 선언된 코드는 다음과 같이 동작합니다.

console.log(name);
var name = 'whoami';

이를 실행하면 undefined가 출력되는 것을 알 수 있습니다. 만약, C, Java, Python에서 이와 같이 코드를 작성한 후 실행한다면 컴파일 또는 런타임 오류가 발생합니다. 반면, Javascript에서는 오류가 발생하지 않는 것을 확인할 수 있는데, 이와 같이 동작하는 이유는 Hositing이라는 동작 때문입니다. Hoisting은 ‘끌어올리다’라는 의미를 갖고 있는데, 위의 코드에서는 var를 맨 위로 끌어올렸다고 할 수 있습니다. 위의 코드를 실행시키면 내부적으로는 다음과 같이 동작합니다.

var name;

console.log(name);
var name = 'whoami';

따라서, 런타임 오류가 발생하지 않고 undefined를 출력하는 것입니다.

2. 적용 범위

Hoisting은 var, function 뿐만 아니라 let, const, class에도 적용됩니다. 그러나, 이들은 TDZ(Temporal Dead Zone)라는 개념으로 인해 참조 오류(ReferenceError)가 발생하기 때문에 let, const에는 hoisting이 적용되지 않는 것처럼 보일 뿐입니다.

3. 방향성 및 개선사항

TDZ는 기본적으로 어떠한 변수를 선언하기 전에 접근하는 것을 엄격히 금지하는 개념으로, TDZ가 적용된 최신 키워드(let, const, class 등)에 hoisting을 시도하면 참조 오류가 발생합니다. Javascript 코드를 작성할 때에는 hoisting을 발생시키지 않도록 하여야 하는 것이 좋으며, 특히, var를 사용하여 변수를 선언하는 경우 hoisting 뿐만 아니라 이미 선언된 변수를 다시 선언할 수 있기 때문에 스파게티식으로 작성된 코드의 주범이 될 수 있습니다.

var num = 1;
var num = 2;
var num = 3;

따라서, var를 대신에 let, const를 사용하고, .js파일의 최상단에 'use strict';를 기입하는 등의 올바른 습관을 들이는 것이 좋습니다.

'use strict';

let name = 'whoami';
console.log(name);