[모던 JS Deep Dive] 15장 - let, const 키워드와 블록 레벨 스코프

15.1 var 키워드로 선언한 변수의 문제점

  - 변수 중복 선언 허용

    - var 키워드로 선언한 변수는 같은 스코프 내에서 중복 선언 허용

    - 초기화문 (변수 선언과 동시에 초기값 할당하는 문) 유무에 따라 다르게 동작

      - 초기화문 있는 변수 선언문은 JS 엔진에 의해 var 키워드 없는 것처럼 동작

      - 초기화문 없는 변수 선언문은 무시됨 (에러 발생 X)

    - 의도치 않게 먼저 선언된 변수 값이 변경되는 side effect 발생

  - 함수 레벨 스코프

    - var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정

    - 전역 변수 남발할 가능성 높음

  - 변수 호이스팅

    - 할당문 이전에 변수 참조 시 언제나 undefined 반환

    - 가독성 떨어뜨리고 오류 발생 여지 남김

15.2 let 키워드

  - 변수 중복 선언 금지

    - let 키워드로 이름이 같은 변수를 중복 선언하면 SyntaxError 발생 (구문/문법 에러)

    - 같은 스코프 내에서 중복 선언 허용 X (const 도 마찬가지)

  - 블록 레벨 스코프

    - 모든 코드 블록(함수, if, for, while, try/catch 등)을 지역 스코프로 인정

  - 변수 호이스팅

    - let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작

    - let 키워드로 선언한 변수를 변수 선언문 이전에 참조하면 ReferenceError 발생

    - let 키워드로 선언한 변수는 '선언 단계'와 '초기화 단계'가 분리되어 진행

    - 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간 => TDZ (일시적 사각 지대)

    - 선언 단계 - 일시적 사각지대 (TDZ) - 초기화 단계 - 할당 단계

    - JS에서는 var, let, const, function, function*, class 등 모든 선언을 호이스팅함

    - ES6의 let, const, class를 사용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작

  - 전역 객체와 let

    - 선언하지 않은 변수는 암묵적으로 전역 취급 (var 붙임)

    - 전역 객체의 프로퍼티 참조 시 window 생략 가능

    - let 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아님

      - let 전역 변수는 전역 렉시컬 환경의 선언적 환경 레코드 내에 존재함 (실행 컨텍스트)

15.3 const 키워드

  - 선언과 초기화

    - const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화 해야 함

    - 그렇지 않으면 SyntaxError 발생

    - 블록 레벨 스코프, 변수 호이스팅 발생하지 않는 것 처럼 동작

  - 재할당 금지

    - const 키워드로 선언한 변수는 재할당 금지 (상수)

    - 재할당 시 TypeError 발생

  - 상수

    - 상수: 재할당이 금지된 변수

    - 상수도 값을 저장하기 위한 메모리 공간이 필요하므로 변수라고 할 수는 있음

    - 변수는 언제든지 재할당을 통해 변수 값을 변경할 수 있지만 상수는 재할당 금지

    - 상태 유지, 가독성, 유지보수 편의를 위해 적극적으로 상수 사용!

    - 변경될 수 없는 고정 값으로 사용 가능 ex. 세율 (const TAX_RATE = 0.1;)

    - 일반적으로 상수의 이름은 대문자로 선언, 여러 단어는 스네이크 케이스로 연결

  - const 키워드와 객체

    - const 키워드로 선언된 변수에 객체를 할당한 경우 값 변경 가능 (원시 값 할당은 값 변경 불가)

      - 객체 값은 재할당 없이도 직접 변경 가능

    - const 키워드는 재할당을 금지할 뿐 "불변"을 의미하지는 않음

      - 프로퍼티의 동적 생성/삭제/갱신은 가능 (객체 값의 경우)

      - 객체가 변경되도 변수에 할당된 참조 값 (주소 값)은 변경 X

15.4 var vs. let vs. const

  - 변수 선언에는 기본적으로 const 사용, let 은 재할당 필요한 경우에 한정적 사용

  - const 키워드 사용 시 의도치 않은 재할당 방지로 인해 안전함