개발하는데 다 이유가 있겠지

공부 이전 답변
자바스크립트 호이스팅은 자바스크립트 엔진이 런타임 이전에 변수, 함수 선언을 코드 최상단으로 끌어올려 실행시키는 것처럼 작동하는 것을 말합니다. 자바스크립트 엔진은 변수를 호이스팅하여 undefined로, 함수는 함수 객체 자체로 초기화하게 됩니다. var 키워드와 ES6부터 등장한 let, const 키워드에 따라 차이가 있습니다. var 키워드는 변수를 선언과 동시에 초기화를 진행하지만, let, const 키워드는 선언과 초기화가 별도로 이루어지기 때문에 그 사이에 TDZ(Temporal Dead Zone)가 생겨 초기화되기 전에 참조할 경우 ReferenceError가 발생하게 됩니다.

`호이스팅(Hoisting)`은 자바스크립트가 코드를 실행하기 전에 변수와 함수 선언을 코드의 최상단으로 끌어올리는 것처럼 동작하는 특징입니다. 이를 통해 코드의 선언된 위치와 관계없이 변수를 사용할 수 있는 것처럼 보일 수 있습니다.

하지만 변수의 선언만 이뤄질 뿐, 변수의 값은 런타임(코드를 실행하는 시점)에 할당됩니다.

`var`키워드로 선언된 변수는 호이스팅되어 값을 할당받기 전까지는 `undefined`로 초기화되어 평가됩니다.

console.log(score);	// undefined

var score = 10;
console.log(score);	// 10

함수 선언은 함수 객체 자체가 호이스팅되기 때문에, 함수 호출을 선언 이전에 해도 문제가 발생하지 않는다.

console.log(add(1+2));	// 3

function add(a, b) {
    return a + b;
}

 

하지만 ES6에서 도입된 `let`, `const`키워드로 선언된 변수는 호이스팅이 되지만, 선언되기 전에 접근하려고 하면 `ReferenceError`가 발생합니다.

`var`키워드로 선언된 변수와는 다르게 let, const 키워드로 선언된 변수는 선언과 초기화 단계가 따로 이루어집니다.

이 때 선언 단계와 초기화 단계 사이의 `TDZ(Temporal Dead Zone)`가 생겨 참조를 하면 에러가 발생하게 됩니다.

console.log(letScore);	// ReferenceError : ...

let letScore = 10;

TDZ는 코드에서 변수가 선언된 시점에서부터 초기화될 때까지의 구간에서 변수를 사용하지 못하게 막아주는 역할을 합니다.

 

정리

호이스팅은 변수와 함수 선언을 코드 상단으로 끌어올리는 것처럼 동작하지만, `var`는 선언 및 undefined로 초기화가 되고, `let`, `const`는 TDZ로 인해 초기화 전에 접근하면 ReferenceError를 발생시킵니다.