호이스팅과 TDZ

Hi, There!
안녕하세요, 바오밥입니다.

---

목차

1. 개요
2. 본문
3. Reference

---

개요

자바스크립트(ES6)의 호이스팅과 TDZ에 대해서 정리하였습니다.

---

본문

변수 (Variable)

ES6 이전에는 var를 사용했고, ES6 이후부터 let과 const 키워드가 사용되기 시작했습니다.

그렇다면 var ↔ let ↔ const 간의 차이점은 무엇일까요?

 

var ↔ let ↔ const

var 변수는 한 번 선언된 변수를 다시 선언할 수 있습니다.

→ 선언된 변수를 다른 값으로 재선언이 가능합니다.

 

var name = "defVar"
console.log(name) // defVar
var name = "reDefVar"
console.log(name) // reDefVar

 

→ let, const는 다른 값으로 재선언이 불가능합니다.

let name = "defVar"
console.log(name) // defVar
let name = "reDefVar" // Uncaught SyntaxError: Identifier 'name' has already been declared
console.log(name) // X

 

var 변수는 호이스팅으로 인해 선언되기 전에 사용이 가능합니다.

 

→ 따라서 변수 n은 사용이 가능하지만, n의 값은 정의되지 않았다(undefined)로 출력됩니다.

// 호이스팅에 의해 1번 코드와 2번 코드의 동작은 같습니다.
// 1번 코드
console.log(n) // undefined
var n = 30

// 2번 코드
var n
console.log(n) // undefined
n = 30

 

→ 변수 선언은 호이스팅 되지만 값 할당은 호이스팅 되지 않습니다.

→ let, const은 TDZ(Temporal Dead Zone)에 의해 호이스팅이 가능한데도 변수 선언이 되지 않습니다.

console.log(name) // Uncaught ReferenceError: Cannot access 'name' before initialization
let name = "jhkim"

 

호이스팅 (Hoisting) 
스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 동작합니다.

 

 

TDZ (Temporal Dead Zone) 
let, const는 값이 할당 되기 전에는 변수를 사용할 수 없습니다. 즉 let과 const라는 변수가 할당 되기 전의 영역을 말합니다.

 

// TDZ 예제
// 1번 코드는 TDZ에 영향을 받지 않습니다.
// 2번 코드는 TDZ에 영향을 받습니다.

// 1번 코드
let age = 20;

function showAge() {
  console.log(age)
}

showAge() // 20

// 2번 코드
let age = 20;

function showAge() {
  console.log(age); // TDZ에 의해 Reference Error가 발생합니다.
	let age = 30; // 호이스팅 되지만 값은 나중에 할당됩니다.
}

showAge() // Reference 오류 발생

 

스코프 (Scope)
스코프는 직역 그대로 범위를 뜻합니다. var는 함수 스코프(function-scoped)이며 let과 const는 블록 스코프(block-scoped) 입니다.

 

 

3. 변수의 생성 과정

• 선언 단계 : 변수가 선언되는 단계입니다.
• 초기화 단계 : 변수가 Undefined로 값이 초기화되어 할당되는 단계입니다.
• 할당 단계 : 사용자가 의도한 값으로 값이 할당되는 단계입니다.

 

3-1) var 변수의 생성 과정

 

a. 선언 및 초기화 단계

→ 따라서 Reference 오류가 아닌 undefined 값을 반환하는 것입니다.

→ var 변수는 선언 및 초기화 단계가 한 번에 진행됩니다.

 

b. 할당 단계

 

3-2) let 변수의 생성 과정

 

a. 선언 단계

→ 따라서 선언만 호이스팅 되고 초기화가 되지 않아 Reference 오류가 출력됩니다.

→ let 변수는 선언 단계와 초기화 단계가 분리되어 있습니다.

 

b. 초기화 단계

 

c. 할당 단계

 

3-3) const 변수의 생성 과정

 

a. 선언 및 초기화 및 할당 단계

→ const 변수를 선언만 하는 것은 불가능합니다.

const test; // Uncaught SyntaxError: Missing initializer in const declaration
test = 1;

---

Reference

• https://youtu.be/ocGc-AmWSnQ