[js] 호이스팅과 TDZ

 

어디서 잘못된 글을 몇번봐서인가..let, const는 호이스팅 되지 않는다고 알고 있던 사람이었다

부끄럽긴 하지만 이참에 다시 자세히 알아보았다

 

먼저 js에서 변수는 선언, 초기화, 할당 3가지 단계를 거친다

• 선언: 변수의 이름을 등록(var, let, const로 변수를 선언)
• 초기화: 메모리 공간을 확보하고 초기값을 설정
• 할당: 변수에 실제 값을 할당

var x; // 선언
console.log(x); // undefined
x = 5; // 할당 
console.log(x); // 5

let y; // 선언
y = 10; // 할당
console.log(y); // 10

const z = 15; 
console.log(z); // 15

 

여기서 특징은 var는 선언과 초기화가 동시에 이루어지고, const는 선언과 동시에 할당이 되어야한다

 

 

 

 

호이스팅이란 js에서 변수와 함수 선언 등이 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 현상이다.

기본적으로 선언이 호이스팅 되고 할당은 호이스팅 되지 않는다

 

 

기존의 var로 예시를 들면 아래와 같이 변수가 선언되기 전에 값이 들어가 있다

console.log(a); // undefined
var a = 10;

 

내부적으로 아래와 같이 해석되기 때문이다

var a;
console.log(a); // undefined
a = 10;

 

 

 

let, const는 블록 스코프를 가지며, 호이스팅 되긴 하지만 변수 선언 전에 접근하려고 하면 ReferenceError가 발생한다

이 구간을 임시 사각지대(TDZ)라고 한다. TDZ란 변수가 초기화되기 전까지 접근할 수 없는 구간이다.

즉, 할당이 되어야 접근이 가능한것

// TDZ 시작
let b;
console.log(b); // ReferenceError: b is not defined
// TDZ 끝
b = 20;
console.log(b); // 20

 

const도 마찬가지로 TDZ가 존재하지만 const는 선언과 동시에 초기화와 할당이 이루어져야한다. 

그래서 뭐,, 사실 TDZ나 const의 특성으로 인하여 접근이 불가능 한 것은 똑같긴 하다

// TDZ 시작
const c;
console.log(c); // ReferenceError: c is not defined
// TDZ 끝
c = 20; // SyntaxError: Missing initializer in const declaration

 

 

 

함수는 함수 선언문과 함수 표현식에서 호이스팅에 차이가 있다

 

함수 선언문은 전체가 호이스팅되므로, 함수 선언 이전에도 함수 호출이 가능하다

console.log(a()); // "Hello"
function a() {
    return "Hello";
}

 

 

 

함수 표현식은 변수에 함수가 할당되는 방식으로, 변수의 호이스팅 규칙을 따르기 때문에 변수 선언만 호이스팅되고 함수 할당은 호이스팅되지 않는다.

console.log(b()); // TypeError: bar is not a function
var b = function() {
    return "Hello";
};
console.log(b()); // "Hello"