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

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

1. 변수 중복 선언 허용
2. 함수 레벨 스코프

var x = 1;
if (true) {
	var x = 10; // x 변수가 중복선언되어 변수값이 변경되는 부작용이 생긴다.
}
console.log(x); // 10

3. 변수 호이스팅으로 인한 가독성 저하

console.log(foo); // undefined
foo = 123;
console.log(foo); // 123
var foo;

ES6의 let, const

let 키워드

1. 변수 중복선언 금지
2. 블록레벨 스코프

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

3. 변수 호이스팅

console.log(foo); // ReferenceError: foo is not defined
let foo;

let 키워드로 선언한 변수는 선언단계와 초기화 단계가 분리되어 진행되어 변수 호이스팅이 발생하지 않는 것처럼 동작한다. 하지만 자바스크립트는 let과 const를 포함한 모든 선언을 호이스팅 하기 때문에 아래와 같은 애러가 발생한다.

let foo = 1; // 전역 변수
{
	console.log(foo); // ReferenceError: Cannot access 'foo' before initializtion
	let foo = 2; // 지역 변수
}

4. 전역 객체와 let

let 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니며, window.foo와 같이 접근할 수 없다. let의 전역 변수는 보이지 않는 개념적인 블록 내에 존재하게 된다.

const 키워드

1. 선언과 초기화
   const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다.
2. 재할당 금지 (상수)
3. const 키워드와 객체
   const로 선언된 변수에 객체를 할당한 경우에는 객체를 변경하는 것이 가능하다.