탐구

var

특징

• ES6 이전에 지배적으로 사용

• 함수 스코프

  var c = 5;
  {
    var c = 10;
  }
  console.log(c); // 10

• 재선언 가능, 재할당 가능

  var a = 5;
  var a = 10;
  var a = 15;
  console.log(a); // 15

• 호이스팅(선언부가 최상단으로 끌어올려지는 현상) 되어 선언문 전에 사용하면 undefined를 출력

  // 3.1 var은 호이스팅
  console.log(e); // undefined
  var e = 5;

단점

1. 재선언되기에 많은 버그를 일으킬 수 있다.

let, const

특징

• ES6에 추가

• 블록 스코프 (조건문(if,else if,else), for, while, do-while, switch문 단순 블록 {})

  let d = 5;
  {
    let d = 10;
  }
  console.log(d); // 5

• 재선언 불가

  let b = 5;
  let b = 10;
  let b = 15;
  console.log(b); // SyntaxError: Identifier 'b' has already been declared

• 호이스팅은 됨. but 선언 - 초기화 사이의 Temporal Dead Zone(TDZ)으로 인해 선언만 이뤄져 Reference Error가 발생

  console.log(f); // ReferenceError: Cannot access 'f' before initialization
  let f = 5;

• let은 재할당 가능 / const는 재할당 불가능

  • const는 재할당이 불가능하지, 본인의 객체, 배열같은 레퍼런스 객체들을 조작할 때는 문제가 없다.

var vs let vs const 비교

1. 재선언

1. var : 가능

   

2. let, const : 불가능

   

2. 재할당

1. var, let : 가능

   let a = 1;
   a = 2;
   a = 3;
   a = 4;
   a = 5;
   
   console.log(a);

   var a = 1;
   a = 2;
   a = 3;
   a = 4;
   a = 5;
   
   console.log(a);

   

2. const : 불가능

   const a = 1;
   a = 2;
   a = 3;
   a = 4;
   a = 5;
   
   console.log(a);

   

   상수 변수에 할당할 수 없습니다.

3. 스코프

1. var : 함수 스코프

   {
     var a = 3;
   }
   
   console.log(a);

   

   var a = 1;
   
   function func() {
     var a = 2;
     if (true) {
       var a = 3;
       console.log(a);  // 3
     }
     console.log(a);    // 3
   }
   
   func();
   
   console.log(a);       // 1

   func안에서 선언한 var a = 3은 func이라는 함수 안에서만 유효하다.

   만약, func함수 안에서 var로 a를 재선언하지 않았다면 a의 값은 바깥에서도 3이었을 것이다.

   for (var a = 1; a < 10; a++) {
     console.log(a);
   }
   console.log(a); // 10

   var는 함수 스코프를 가지기에, 블록 스코프로 가둘 수 없다. 따라서, for문이 끝나고 a를 출력하면 10이 출력된다.

2. let, const : 블록 스코프

   {
     let a = 3;
   }
   
   console.log(a);

   {
     const a = 3;
   }
   
   console.log(a);

   

   가장 바깥 영역에서는 a가 선언되지 않았다.

4. TDZ

1. var : TDZ가 존재하지 않는다. 선언과 동시에 초기화가 된다.
2. let, const : TDZ가 존재한다.