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

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

1. 변수 중복 선언 허용
   • 동일한 이름의 변수가 이미 선언되어 있는 것을 모르고 변수를 중복 선언하면서 값까지 할당했다면 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용 발생

var x = 1; // x변수 선언 & 초기화 동시에
var y = 1; // y변수 선언 & 초기화 동시에

var x = 100; // 선언 문 O, 초기화 문도 X
var y; // 선언 문은 O, 초기화 문이 X (암묵적 무시)

console.log(x); // 100
console.log(y); // 1

2. 함수 레벨 스코프
   • 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다 -> 함수 레벨 스코프
   • 함수 레벨 스코프는 전역 변수를 남발할 가능성이 크다

var x = 1;

// 코드 블록(블록 레벨), 하지만 var 는 함수 레벨 스코프
// 블록 내 x변수는 전역 변수 처럼 스코프가 적용
{
  var x = 10;
}

console.log(x); // 10

3. 변수 호이스팅
   • 에러를 발생시키지는 않지만 프로그램의 흐름상 맞지 않고 가독성을 떨어뜨리고 오류를 발생시킬 여지를 남긴다.

console.log(foo); // undefined << foo 변수 암묵적 선언 & 초기화 (호이스팅)

foo = 123; // foo변수 값 할당

console.log(foo); // 123

var foo;

let 키워드

ES6에 도입되어 var 키워드의 단점을 보완하기 위해 등장했다.

1. 변수 중복 선언 금지
   • let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러가 발생한다.

// var 변수 = 중복 선언 허용 O
var foo = 123;
var foo = 456;
console.log(foo);

// let 변수 = 중복 선언 허용 X
let bar = 123;
let bar = 456; // SyntaxError: Identifier 'bar' has already been declared
console.log(bar);

// 선언 단계 에서 체크하므로 → 위에서 var 변수인 foo에 대한 출력문 실행이 진행 안됨

2. 블록 레벨 스코프
   • 모든 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

let foo = 1;

{
  let foo = 2;
  let bar = 3;
}

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

3. 변수 호이스팅

   • 변수 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다.
   • var 키워드와 변수의 선언과 초기화 시점에 차이가 있어 비교해야 한다.

// 변수 호이스팅 - var 변수
console.log(foo); // undefined

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

foo = 1;
console.log(foo); // 1

// 변수 호이스팅 - let 변수
console.log(foo); // 일시적 사각지대(TDZ) - ReferenceError: Cannot access 'foo' before initialization ( 사실상, 여기서 프로그램 종료 )

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

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

const 키워드

상수를 선언하기 위해 사용한다 (단, 반드시 상수만을 위해서 사용하는 것은 아님)

일반적으로 let 키워드와 특징이 동일하다. 차이점은 다음과 같다.

1. 반드시 선언과 동시에 초기화해야 한다

const foo;  // SyntaxError: Missing initializer in const declaration

2. 재할당 금지

const foo = 1;
foo = 2; // TypeError: Assignment to constant variable.

3. const로 상수

   • 원시 값을 할당한 경우 변수 값을 변경할 수 없다.
   • 원시 값은 변경 불가능한 값이므로 재할당 없이 변경할 수 있는 방법이 없기 때문이다.

4. const로 객체
   • 객체를 할당한 경우 변수 값을 변경할 수 있다.
   • 객체는 재할당 없이도 직접 값을 변경할 수 있기 때문이다. -> 객체가 변경되더라도 변수에 할당된 참조 값은 변경되지 않음
   • const 키워드는 재할당을 금지할 뿐, 불변을 의미하지는 않는다.