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

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

15.1.1. 변수 중복 선언 허용

• var 키워드 변수는 중복 선언 가능
• 초기화 변수 선언문은 이전 var 키워드를 무시하고 에러도 발생하지 않음
  • 중복 이름을 모르고 선언하는 경우 데이터 부작용 발생

15.1.2. 함수 레벨 스코프

• var 키워드 변수는 함수 코드 블록만을 지역 스코프로 인정함
• 함수 외에 선언한 경우 모두 전역 변수가 됨
  • for문에서 선언한 변수도 전역 변수

15.1.3. 변수 호이스팅

• 변수 호이스팅에 의해 var 키워드 변수는 변수 선언문 이전에 참조할 수 있음
• 단, 할당문 이전에 참조하면 언제나 undefined를 반환
  • 암묵적으로 '선언 단계'와 '초기화 단계'가 한 번에 진행됨
• 코드 흐름과 맞지 않고 가독성 떨어짐, 오류 발생 여지

15.2. let 키워드

15.2.1. 변수 중복 선언 금지

• 중복 선언 불가
• 문법 에러(SyntaxError) 발생

15.2.2. 블록 레벨 스코프

• 모든 코드 블록(함수, 조건문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따름

15.2.3. 변수 호이스팅

• 변수 호이스팅이 발생하지 않는 것처럼 동작함
• 변수 선언문 이전에 참조 시 참조 에러(ReferenceError) 발생
  • 런타임 이전에 '선언 단계'가 먼저 실행되고, 변수 선언문에 도달할 때 '초기화 단계' 실행
  • 스코프 시작 지점부터 초기화 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대라고 부름

15.2.4. 전역 객체와 let

• var 키워드 전역 변수와 전역 함수, 암묵적 전역은 전역 객체 window의 프로퍼티가 됨

// 전역 변수
var x = 1;
console.log(window.x); // 1

• let 키워드 전역 변수는 전역 객체의 프로퍼티가 아님(window 객체로 접근할 수 없음)
• 보이지 않는 개념적인 블록(렉시컬 환경의 선언적 환경 레코드) 내에 존재함

15.3. const 키워드

• const 키워드는 상수(constant) 선언을 위해 사용됨
• let 키워드와 대부분 동일한 특징을 가짐

15.3.1.선언과 초기화

• const 키워드 변수는 반드시 선언과 동시에 초기화하지 않으면 문법 에러 발생함

const foo = 1;
const foo; // SyntaxError

15.3.2. 재할당 금지

• const 키워드 변수는 재할당 금지

15.3.3. 상수

• const 키워드 변수에 원시 값을 할당한 경우 변경할 수 없음
• 전체 프로그램에서 고정된 값을 사용하는 경우 유지보수성 향상
• 일반적으로 상수의 이름을 명시적으로 대문자로 선언

15.3.4. const 키워드와 객체

• const 키워드 변수에 할당된 객체는 변경할 수 있음
  • 변수의 '재할당'이 금지
  • 할당되어 있는 객체, 프로퍼티의 동적 생성이나 삭제 등을 통해 변경하는 것은 가능

15.4. var / let / const

• 변수 선언 시 기본적으로 const를 사용
• 재할당이 필요한 경우 let 사용, 변수의 스코프는 최대한 좁게 설정
• ES6 사용하는 경우 var 키워드는 사용 지양
  
  

[출처] 모던 자바스크립트, Deep Dive