모던 자바스크립트 책 정리- 변수와 상수 TDZ

🧸 변수

변수는 값을 담기 위한 공간이다.

 

🧸 [변수 생성의 3단계]

선언 → 초기화 → 할당

- 선언: 실행 컨텍스트에 변수 객체를 등록 (스코프가 참조하는 대상!)

- 초기화: 변수 객체에 등록된 변수를 위해 메모리에 공간을 확보 (여기서 변수는 보통 undefined로 초기화)

- 할당: undefined로 초기화된 변수에 실제 값을 할당

 

 

1️⃣ var

- 생략도 가능

- var로 선언한 변수는 블록 스코프가 아니라 함수 스코프에 종속된다.

(스코프란? 어디까지 쓸 수 있는가? 어디까지 살아있는가)

-var는 선언과 초기화를 한번에 한다.

-재선언이 가능하다.

-선언하기 전에도 사용할 수 있다.

- for 루프(블록스코프)내에서 변수를 선언하면 for 밖에서 사용할 수 있다.

for (var i=0; i<10 i++){
	var leak = "hi"
}

console.log(leak)
// "hi"

 

- 코드 블럭을 무시한다. (var는 함수의 최상위로 호이스팅 / 선언은 호이스팅 되고 할당은 호이스팅 되지 않는다.)

 

👉 var는 가급적 사용하지 않는 게 좋다.

 

2️⃣ let

- 자바스크립트에서 변수를 생성할 때 쓰는 키워드

- 블록 스코프로 종속된다.

- {}안에서 선언하면 {} 안에서만 쓰고 바깥에선 쓸 수 없다.

- 재선언은 불가, 재할당은 가능!

 

3️⃣ const

- constant 상수이므로 값을 덮어 쓸 수 없다.

-자바스크립트에서 상수를 생성할 때 쓰는 키워드

- block-scope를 갖는다.

- {}안에서 선언하면 {} 안에서만 쓰고 바깥에선 쓸 수 없다.

- 재선언 불가, 재할당도 불가! (⇒ 선언과 동시에 할당)

 

 

4️⃣ TDZ(Temporal Dead Zone) = 일시적 사각지대 / 일시적 비활성 구역

console.log(i);

var i ="hi";

// undefined


console.log(j);
let j = "hello";

// ReferenceError : can't access lexical declaration 'j' before initialization

var는 정의되기 전에 접근할 수 있지만, 그 값에는 접근할 수 없다.

let 와 const 는 정의하기 전에 접근 할 수 없다.

var, let, const 모두 다른 소스에서 읽을 수 있는 내용임에도 불구하고 호이스팅의 대상이 된다.

 

즉, 코드가 실행되기 전에 처리되고 해당 스코프(글로벌 , 블록) 상단으로 올라간다.

 

👉 var과 let, const의 차이점 중 하나는 변수가 선언되기 전에 호출하면 ReferenceError가 난다는 점

 

요약하자면,

→ let, const 선언도 호이스팅 된다.

→ 스코프에 진입할 때 변수를 만들고, TDZ가 생성되지만 코드 실행이(=실행 컨텍스트가) 변수가 있는 실제 위치에 도달할 때까지 엑세스를 못할 뿐!

 

 

참고강의자료