자바스크립트 - Hoisting(호이스팅) & TDZ 쉬운 설명

호이스팅이란 자바스크립트 파일 실행 시, 변수와 함수가 마치 최상단에 올려진 후 파일이 실행되는것을 말한다.

실제로는 변수와 함수가 파일 최상단에 올려지는건 아니고 변수와 함수가 먼저 메모리에 할당되기 때문이다

이때 호이스팅된 var로 선언한 변수의 값은 undefined로 초기화 한다

아래 코드는 에러가 없다

console.log(name); // undefined
var name = 'John';

왜냐하면 자바스크립트 엔진이 아래와 같은 코드로 인식하고 실행하기 때문이다

var name;
console.log(name); // undefined
name = 'John';

함수도 마찬가지다

아래 코드는 함수를 정상적으로 실행시킨다

print('hello'); // "hello"

function print(string) {
    console.log(string);
}

자바스크립트 엔진이 아래와 같이 실행시키기 때문이다

function print(string) {
    console.log(string);
}

print('hello'); // "hello"

let과 const로 선언된 변수도 마찬가지로 호이스팅이 되긴하지만

호이스팅 시, 초기화 값이 없고 TDZ(Temporal Dead Zone)에 갇혀서

let과 const가 선언된 줄 이전에 접근 시 에러가 난다

console.log(name); // Uncaught ReferenceError: name is not defined
let name = 'John';

결론은 그냥 var는 쓰지 않는게 바람직하다.

참조

IT 블로그