[모던자바스크립트 딥다이브] 15장 let, co nst 키워드와 블록 레벨 스코프

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

1. 변수 중복 선언 허용

• 같은 스코프 내에서 중복 선언을 허용 → 의도치 않게 변수 값이 변경되는 부작용 발생
• 초기화 문이 있는 변수 선언문의 경우 자바스크립트 앤진에 의해 var 키워드가 없는 것 처럼 동작. (초기화 문이 없는 변수 선언문은 무시된다.)

var x = 10
// 코드진행 ~~~
var x = 100
// x = 100 처럼 재할당 하는 것 처럼 동작하게 된다.

2. 함수 레벨 스코프

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

var x = 10
if(true){
    var x = 100
}

// if 블럭 내의 var 키워드로 선언된 변수 x와 if 블록 외부의 var키워드로 선언한 변수 x는
// 동일 스코프 이므로 ( 블록 레벨 스코프를 지원하지 않음)
// 결국 var 키워르도 선언된 변수 x는 중복 선언 된다.

3. 변수 호이스팅

• 변수 호이스팅에 의해 스코프로의 선두로 끌어 올려진 것처럼 동작한다. 따라서 선언문 이전에 undefined를 반환하는 형태로 참조가 가능하다. → 코드 가독성 저하

let 키워드

1. 변수 중복 선언 금지

• 중복 선언을 허용하지 않는다. ( already been declared )

2. 블록 레벨 스코프

• 블록 레벨 스코프를 따른다.

3. 변수 호이스팅

• 선언단계와 초기화 단계가 분리되어 진행되므로 변수 호이스팅이 발생하지 않는 것처럼 동작한다.
  • → 않는 것 처럼 동작할 뿐 실제로 호이스팅이 이루어 진다. 따라서 ReferenceError, Cannot access ‘변수명’ before initialization; 즉, 초기화 전에 참조할 수 없다는 에러가 발생한다.
• 호이스팅에 의해 선언 단계가 실행되지만 초기화 단계는 변수 선언문에 도달 되었을 때 실행 되므로, 스코프의 시작 시점부터 초기화 단계 시작 점 까지 참조할 수 없는 구간 (→TDZ, Temporal Dead Zone)이 생긴다.

4. 전역 객체와 let

• var 키워드로 선언한 전역 변수는 전역 객체 (window or node) 의 프로퍼티가 된다.
• 반면 let 키워드로 선언한 전역 변수는 개념적인 블록 ( 전역 렉시컬 환경의 선언적 환경 레코드) 에 존재하므로 전역 객체의 프로퍼티가 아니다.

const 키워드

상수를 선언하기 위해 사용한다.

1. 선언과 초기화

• 반드시 선언과 동시에 초기화가 이루어 져야 한다.

2. 재할당 금지

3. 상수

• 자바스크립트의 원시 값(변경 불가능한 값)을 할당할 경우 재할당 할 수 없기 때문에 상수를 표현하는데 사용 가능하다.
• 상수는 상태 유지와 가독성, 유지보수의 편의를 위해 적극 사용 해야한다.
• 일반적으로 상수명은 대문자로 표기하며 언더스코어를 통해 단어를 구분한다.

4. const 키워드와 객체

• 재할당이 불가능한 const 키워드로 변수를 선언하더라도 자바스크립트의 변경 가능한 값, 즉 객체는 값의 변경이 가능하다.
• const 키워드는 재할당 금지를 의미할 뿐 불변을 의미하지 않는다. (읽기 전용 개념)

var・let・const

• var 키워드 사용은 권장하지 않는다.
• 재할당이 필요한 경우 let 키워드를 사용한다. 변수의 스코프를 최소화 한다.
• 변경이 발생하지 않고 읽기 전용일 경우 const 키워드를 사용한다.