호이스팅 (Hoisting)
자바스크립트에서 호이스팅이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미
한다.
즉, 변수의 선언과 초기화를 분리한 후 선언만 코드의 최상단으로 옮기는 것이다.
var, let, const, function, function*, class 키워드를 사용해서 선언하는 모든 식별자는 호이스팅 된다.
test();
function test() {
console.log("test.";
}
//result: "test."
TDZ (Temporal Dead Zone)
TDZ는 일시적인 사각지대로, 변수를 사용하는 것을 비허용하는 개념상의 공간이다.
TDZ에 있는 값에 접근하게 되면 ReferenceError: Cannot access 'xxx' before initialization가 발행한다.
TDZ에 있는 변수 객체는 선언은 되어있지만 아직 초기화가 되지 않아서 변수에 담길 값을 위한 공간이 메모리에 할당되지 않은 상태이다.
const와 let은 호이스팅이 되지 않는 것이 아니고 호이스팅이 다른 방식으로 작동한다고 말한다.
일단 여기선 편의상 호이스팅이 되는/되지않는으로 구분해보자.
- var 변수: 호이스팅 된다.
- const, let 변수: 호이스팅 되지 않는다.
- 함수 표현식 (Function Expression): 호이스팅 되지 않는다.
a(); // Uncaught TypeError: a is not a function
var a = function () {
console.log("foo");
};
a();
- 함수 선언문 (Function Declaration): 호이스팅 된다.
say(); // Hello
function say() {
console.log("Hello");
}
say();
'Front-end > JavaScript' 카테고리의 다른 글
| [JavaScript] classList 사용법 (0) | 2023.07.15 |
|---|---|
| [JavaScript] innerHTML, innerText, textContent 차이점 (0) | 2023.07.02 |
| [JavaScript] var, let, const의 차이점 (0) | 2023.06.28 |
| const도 수정할 수 있다? (0) | 2023.06.23 |
| [JavaScript] 객체 Object (0) | 2023.06.23 |