모던 자바스크립트 Deep Dive 15장 let, const 키워드와 블록 레벨 스코프

🔑 키워드 정리

• 일시적 사각지대(Temporary Dead Zone; TDZ) : let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점(변수 선언)까지 변수를 참조할 수 없다. 이 구간을 가리킨다.

x = "global";

// function scope:
(function() {
    x; // not "global"

    var/let/… x;
}());

// block scope (not for `var`s):
{
    x; // not "global"

    let/const/… x;
}

🗒 내용 정리

var 키워드

• var 키워드로 선언한 변수는 중복 선언이 가능하다.
• 함수 외부에서 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다.
• 변수 호이스팅은 var 키워드 변수를 스코프의 선두로 끌어올린다. 이는 가독성을 떨어뜨리고 오류 발생 가능성을 높인다.
• 전역 객체의 프로퍼티(전역 변수, 전역 함수)를 참조할 때 window를 생략할 수 있다.

let 키워드

• 함수도 코드 블록ㅇ이므로 스코프를 만든다. 함수 내의 코드 블록은 함수 레벨 스코프에 중첩된다.
• 변수 호이스팅이 발생하지 않는 것처럼 동작한다. 하지만 그렇지 않다. "선언 단계"와 "초기화 단계"가 분리되어서 진행된다. 선언 단계는 자바스크립트 엔진에 의해 실행, 초기화 단계는 변수 선언문에 도달했을 때 실행된다.
• let 키워드를 사용한 전역 변수는 전역 객체의 프로퍼티가 되지 않는다. window.foo와 같이 접근할 수 없다. 23장 실행 컨텍스트에서 자세히 다룬다.

const 키워드

• let 키워드와 거의 동일한 특징을 갖는다.
• 상수를 표현하는 데 사용한다. 주로 스네이크 케이스로 표현한다. ex) const TAX_RATE = 10;
• 원시 값은 재할당할 수 없지만, 객체를 할당한 경우 값을 변경할 수 있다.

 

---

TDZ 예시 참고)
https://stackoverflow.com/questions/31219420/are-variables-declared-with-let-or-const-hoisted