let

1. 변수 중복 선언 금지

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

2. 블록 레벨 스코프

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

   var vs let

   // var
   var i = 10;
   
   function foo() {
   	var i = 100;
   	for (var i = 1; i < 3; i++) {
   		console.log(i); // 1 2
   	}
   	console.log(i); // 3
   }
   
   console.log(i); // 10
   

   // let
   let i = 10;
   
   function foo() {
   	let i = 100;
   	for (let i = 1; i < 3; i++) {
   		console.log(i); // 1 2
   	}
   	console.log(i); // **100**
   }
   
   console.log(i); // 10
   

3. 변수 호이스팅

   • let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

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

   왜 let 키워드로 선언한 변수는 호이스팅이 발생하지 않는 것처럼 동작할까?

   • var의 경우, 변수 선언 단계와 초기화 단계가 한 번에 진행된다. 따라서 런타임 이전에도 (할당문 실행 이전에도) undefined로 초기화 된 상태기 때문에 해당 변수를 참조할 수 있다.

   • let의 경우, 변수 선언 단계와 초기화 단계가 분리되어 진행된다. 선언 단계는 런타임 이전에 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행된다.

   • 결국 스코프의 시작 지점부터 초기화 단계 시작 지점까지 변수를 참조할 수 없으며, 이 구간을 일시적 사각지대 라고 한다.

     console.log(foo); // ReferenceError
     
     let foo;
     console.log(foo); // undefined
     
     foo = 1;
     console.log(foo); // 1
     

4. 전역 객체와 let

   • let, const 로 선언한 전역 변수는 window의 프로퍼티가 아니다.

   var x = 1;
   y = 2;
   
   function foo() {}
   
   console.log(window.x); // 1
   console.log(x); // 1
   console.log(window.y); // 2
   console.log(y); // 2
   

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