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

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

---

변수 중복 선언 허용

• var 키워드로 선언한 변수는 중복 선언 가능
  • 초기화문 (변수 선언과 동시에 초깃값 할당) 유무에 따라 다르게 동작
  • 초기화문이 없는 변수 선언문은 무시됨
  ⇒ 동일한 이름의 변수가 있는지 모르고 중복 선언하며 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이 변경됨

함수 레벨 스코프

• var 키워드로 선언한 변수는 오로지 **함수의 코드 블록**만을 지역 스코프로 인정 ⇒ 함수 레벨 스코프
  • 함수 내부에서 선언한 변수라도 전역 변수가 되어 함수 외부에 이름이 같은 변수가 있다면 중복 선언되어 변수 값이 의도치 않게 바뀔 수 있음

  var x = 1;
  
  if (true) {
  	var x = 10;
  }
  
  console.log(x); // 10
  

• 함수 레벨 스코프는 전역 변수를 남발할 가능성을 높임 ⇒ 의도치 않은 전역 변수 중복 선언 발생

변수 호이스팅

• var 키워드로 변수 선언 시 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것처럼 동작 ⇒ var 키워드로 선언한 변수는 변수 선언문 이전에 참조 가능 (할당문 이전에 참조하면 undefined 반환)
• 변수 선언문 이전에 변수를 참조하는 것은 호이스팅에 의해 에러가 발생하지 않지만, 가독성을 떨어뜨리고 오류 발생 여지를 남김

let 키워드

---

변수 중복 선언 금지

• 이름이 같은 변수 중복 선언 시 SyntaxError (문법 에러) 발생

블록 레벨 스코프

• let 키워드로 선언한 변수는 모든 코드 블록 (함수, if 문, for 문, while 문, try/catch 문 등) 을 지역 스코프로 인정하는 블록 레벨 스코프

let foo = 1; // 전역 변수
{
	let foo = 2; // 지역 변수
	let bar = 3; // 지역 변수
}
console.log(foo); // 1
console.log(bar); // ReferenceError

변수 호이스팅

• let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작
  • 변수의 **선언 단계**와 **초기화 단계**가 **분리**되어 진행
    • 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만, 초기화 단계는 변수 선언문에 도달했을 때 실행 ⇒ 초기화 단계 실행 전에 참조하면 ReferenceError
• let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점까지 변수 참조 X (이 구간을 일시적 사각지대라고 부름)

console.log(foo); // 변수 초기화 전이므로 일시적 사각지대 => 변수 참조 X ReferenceError

let foo; // 변수 선언문에서 초기화 단계 실행
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계 실행
console.log(foo); // 1

⇒ let 키워드로 선언한 변수는 호이스팅이 발생하지 않는 것처럼 보임 but 호이스팅 함

let foo = 1; // 전역 변수

{
	console.log(foo); // ReferenceError
	let foo = 2;
}

• 만약 let 키워드로 선언한 변수가 변수 호이스팅을 하지 않았더라면 함수 내에서 foo 출력 시 전역 변수인 1을 출력했어야 하는데, 호이스팅이 발생하여 참조 에러가 발생

전역 객체와 let

• var 키워드로 선언한 전역 변수, 전역 함수, 선언하지 않은 변수에 값을 할당한 암묵적 전역은 전역 객체 window의 프로퍼티가 됨 (전역 객체의 프로퍼티 참조 시 window 생략 가능)
• let 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티 X
  • 보이지 않는 개념적인 블록 내에 존재 (전역 렉시컬 환경의 선언적 환경 레코드)

  let x = 1;
  console.log(window.x); // undefined
  console.log(x); // 1
  

⇒ 전역 변수라도 let 키워드로 선언한 변수는 전역 객체의 프로퍼티가 아님 (window. ~~ 으로 참조 불가)

const 키워드

---

• const 키워드는 상수를 선언하기 위해 사용 (무조건 상수만을 위해 사용하는 것은 X)
• const 키워드의 특징은 let 키워드와 대부분 동일 (변수 중복 선언 금지, 블록 레벨 스코프, 전역 객체를 통해 참조 불가)

선언과 초기화

• const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화
  • 초기화를 하지 않고 선언만 할 경우 SyntaxError 발생
• let 키워드로 선언한 변수와 마찬가지로 블록 레벨 스코프를 가지며, 변수 호이스팅이 발생하지 않는 것처럼 동작

재할당 금지

• var 키워드나 let 키워드로 선언한 변수는 재할당이 자유로우나 const 키워드로 선언한 변수는 **재할당 금지**

const foo = 1;
foo = 2; // TypeError

상수

• const 키워드로 선언한 변수에 원시 값을 할당한다면 변수 값 변경 X
  • 원시 값은 재할당 없이 값을 변경할 수 없기 때문 ⇒ 이러한 특징을 이용해 const 키워드로 **상수 표현**
• 상수 : 재할당이 금지된 변수 (변수의 상대 개념)
• 상수는 상태 유지, 가독성, 유지보수의 편의를 위해 적극 사용해야 함
• 상수의 이름은 **대문자**로 선언 (여러 단어로 이뤄진 경우 언더스코어 _ 로 구분하여 **스네이크 케이스**로 표현하는 것이 일반적)

const 키워드와 객체

• const 키워드로 선언한 변수에 원시 값을 할당하면 변경할 수 없지만, 객체를 할당한 경우 **값 변경 가능**
  • 객체는 재할당 없이 직접 값 변경 가능하기 때문
• const 키워드는 **재할당을 금지**할 뿐 불변을 의미하는 것은 X

⇒ 새로운 값을 재할당하는 것은 불가능하지만, 프로퍼티 동적 생성, 삭제, 프로퍼티 값 변경은 가능 (객체가 변경되더라도 변수에 할당된 참조 값은 변경되지 X)

var vs. let vs. const

---

• ES6 사용한다면 var 키워드 사용 X
• 재할당 필요한 경우 let 키워드 사용 (변수의 스코프는 최대한 좁게)
• 변경이 발생하지 않고 재할당이 필요 없는 원시 값과 객체는 const 키워드 사용

⇒ 변수 선언에는 기본적으로 const 키워드 사용하고, let은 재할당이 필요한 경우에 한정해 사용하는 것이 좋음