[JS] var, let, const

🌱 var 키워드의 문제점

1. 변수 중복 선언 허용 : var 키워드로 선언한 변수는 같은 스코프 내에서 중복 선언이 가능하다.

   var x = 1;
   var y = 1;
   
   var x = 100;
   var y; // 초기화문이 없는 변수 선언문은 무시된다.
   
   console.log(x); // 100
   console.log(y); // 1

2. 함수 레벨 스코프 : var 키워드로 선언한 변수는 함수의 코드 블록만을 지역 스코프로 인정한다. 함수 외부에서 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다.

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

   var i = 10;
   
   for(var i = 0; i < 5; i++) {
   	console.log(i); // 0 1 2 3 4
   }
   
   console.log(i); // 5

3. 변수 호이스팅 : var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것 처럼 동작한다. 이는 프로그램의 흐름상 맞지 않고, 오류를 발생시킬 여지를 남긴다.

   console.log(foo); // 2. foo는 undefined로 초기화 된다.
   
   foo = 123; // 3. 변수에 값을 할당한다.
   
   console.log(foo); // 123
   
   var foo; // 1. 변수 선언은 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 실행된다.

🌱 let 키워드

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

   let bar = 123;
   let bar = 456; // SyntaxError: Identifier 'bar' has already been declared

2. 블록 레벨 스코프 : let 키워드로 선언한 변수는 모든 코드 블록을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

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

3. 변수 호이스팅 : let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것 처럼 동작한다. var 키워드로 선언한 변수는 선언 단계와 초기화 단계가 한번에 진행되는 반면, let 키워드로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.

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

   스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대(TDZ)라고 부른다.