1. 변수

1-1. 변수의 종류

var

1. 선언 및 초기화 단계
2. 할당 단계

선언 및 초기화가 호이스팅 되면서 진행됨.

let

1. 선언 단계
2. 초기화 단계
3. 할당 단계

선언은 호이스팅 되면서 일어나지만, 초기화는 실제 코드에서 나올 때 진행됨.

const

1. 선언 + 초기화 + 할당

---

2. 호이스팅

2-1. 호이스팅 이란?

스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동함.

2-2. 호이스팅 예제

var 호이스팅

console.log(abc);
var abc = 'a';
abc = 'sumin'

이처럼 선언해도 1번줄에서 오류가 발생하진 않는다. 하지만 abc 변수의 값은 undefind가 된다. 왜냐하면 선언은 호이스팅 돼도, 할당은 호이스팅 되지 않기 때문이다.

let 호이스팅

console.log(abc);
let abc = 'a';
abc = 'sumin'

하지만 let은 위 코드를 실행하면 에러가 난다. let 도 호이스팅 되긴 한다. 하지만 console.log(abc) 줄은 TDZ 영역이기 때문에 에러가 나는 것이다.

---

3. TDZ

3-1. TDZ란?

Temporal Dead Zone 으로 선언 전에 변수에 접근하는 것을 금지하고, 변수 선언 전에는 어떤 것도 사용하지 않게 하는 조건이다.

3-2. TDZ의 영향을 받는 구문

const 변수

선언, 초기화, 할당이 되기 전까지 TDZ에 있다.

let 변수

선언될 때 호이스팅 되지만, 초기화 단계가 코드에서 나타날 때 진행되므로 그 전까지 TDZ에 있다.

class 구문

함수는 선언 전에 호출할 수 있지만 클래스는 그럴 수 없다

controuctor() 내부의 super()

부모 클래스를 상속받은 경우, 생성자 안에서 super()를 호출하기 전 까지 this 바인딩이 TDZ에 있기 때문에 사용할 수 없다.

3-3. TDZ의 영향을 받지 않는 구문

var

선언하기 전에 접근하면, undefined를 반환함.
왜냐하면 선언과 초기화는 호이스팅 되지만, 할당은 호이스팅되지 않기 때문

function

함수 선언은 호이스팅되기 때문에 어디서 선언하든지 어디서든 호출할 수 있다.

import

import 구문은 호이스팅되기 때문에 어디서든 import 해도 되지만 파일 시작부분해서 가져오는게 좋다.

3-4. TDZ 스코프

TDZ는 선언문이 존재하는 스포크 범위 안에서만 변수에 영향을 준다.

function scopeTest(value){
    typeof variable; //=> undefined
    if(value){
        typeof varable; //throws 'ReferenceError'
        let variable;
    }
}

scopeTest(true);