자바스크립트 호이스팅

자바스크립트 호이스팅

호이스팅(Hoisting)은 자바스크립트가 코드를 실행하기 전에 변수와 함수 선언이 코드의 최상단으로 끌어올리는 것처럼 동작하는 특징이다.
이 떄문에 선언된 위치보다 상단에서 변수에 접근할 수 있는 것처럼 보일 수 있다.

호이스팅은 값 할당까지 끌어올리지는 않는다. var로 선언된 변수는 선언과 초기화는 끌어올려지지만 값 할당은 끌어올려지지 않기 때문
값 할당이 이뤄지기 전까지 undefined로 평가된다.

console.log(myVar); // undefined

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

---

함수 선언식은 함수 자체가 호이스팅되기 때문에, 함수 호출을 선언 이전에 해도 문제가 없다.

console.log(myFunction()); // 'Hello World' 출력

function myFunction() {
  return 'Hello World';
}

---

ES6에서 도입된 let const는 선언문 이전에 접근하려고 하면 ReferenceError가 발생한다.

Temporal Dead Zone(TDZ)

TDZ는 변수가 선언되었지만 초기화되기 전까지의 구간을 말한다.
let const로 선언된 변수에는 TDZ가 존재하며, 이 구간에서는 변수에 접근할 경우 ReferenceError가 발생한다.
TDZ는 코드에서 변수가 선언된 시점부터 초기화될 때까지의 구간에서 변수를 사용하지 못하게 막아주는 역할을 한다.

console.log(myLet); // ReferenceError 발생

let myLet = 10;

---

let 변수는 선언 자체는 호이스팅되지만 초기화가 호이스팅되지 않는다.
선언 즉시 undefined로 초기화되는 var와 다르게, let은 해당 라인의 코드가 실행될 때까지 초기화가 이루어지지 않는 것이다.

---

호이스팅은 변수와 함수 선언을 토드 상단으로 끌어올리는 것처럼 동작하는 특징을 가르킨다.
var는 초기화 전에 접근 시 undefined로 나타나며, let const는 TDZ로 인해 초기화 전에 접근하면 ReferenceError를 발생시킨다.