- 선언한 변수가 맨 위 상단으로 끌어올려지는 것을 의미한다.
🧁 인터프리터가 변수와 함수의 메모리 공간을 선언(변수, 함수) 전에 미리 할당하는 것을 호이스팅이라고 한다.
- 선언은 호이스팅되지만, 값의 할당은 호이스팅이 되지 않는다.
console.log(name); // undefined
var name = "zone";
-
위의 코드는 오류가 발생하지 않는데, var 변수 name의 선언 이 먼저 일어났기 때문이다.
-
다만, 값이 할당되지는 않았기에 undefined이 출력된다.
-
위와 같은 코드를 let으로 작성하면 오류나 난다.
-
let과 const도 호이스팅은 일어나지만, undefined으로 변수를 초기화하지는 않기 때문이다.
🍲 let과 const는 블록 스코프를 가지고, var은 함수 수준 스코프를 가진다.
-
const는 선언과 함께 값이 할당(초기화)되야 하고, let은 선언 후 바로 값을 할당하지 않아도 괜찮다.
-
하지만, let의 초기화전에 let 변수에 접근하게 되면, ReferenceError가 발생하게 된다.
let a;
console.log(a);
// undefined
a = 7;
console.log(b);
// ReferenceError: Cannot access 'b' before initialization
let b = 8;-
위의 let b는 호이스팅이 일어났지만, 초기화(값이 할당)되지는 않았다.
-
이와 같이 let이 호이스팅으로 선언되었지만, 초기화가 되지 않은 시점에 이 변수는 시간상 사각지대(Temporal Dead Zone, TDZ)에 있다고 한다.
🧀 작성 순서(위치)가 아니라 코드의 실행 순서(시간)에 의해서 TDZ는 형성된다.
// TDZ가 스코프 맨 위에서부터 시작
const func = () => console.log(letNum); // OK
// TDZ 안에서 letVar에 접근하면 ReferenceError가 발생한다.
let letNum = 3; // letNum의 TDZ 종료 (초기화)
func(); // TDZ 밖에서의 호출
- 함수 표현식은 함수 선언식과는 다르게 호이스팅이 일어나지 않는다.
// const output1 = printNum(-100);
// console.log(output1);
// 에러가 발생한다.
// ReferenceError: Cannot access 'printNum' before initialization
const printNum = (num) => {
return `${num}을 출력합니다.`
}
const output2 = printNum(100);
console.log(output2); // 100을 출력합니다.
🍦 참고 자료 : https://developer.mozilla.org/ko/docs/Glossary/Hoisting, https://ko.javascript.info/var, https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let#%EC%8B%9C%EA%B0%84%EC%83%81_%EC%82%AC%EA%B0%81%EC%A7%80%EB%8C%80
