ES6문법이 사용되기 전에는 "var"을 사용했습니다. ES6문법이 사용되면서 변수 선언할 때 var, let, const를 사용합니다. var를 사용했을 때와 let, const를 사용했을 때 차이가 있습니다.

1. 변수선언, 할당


  • var는 변수 선언할 때 사용한 이름으로 다시 선언할 수 있습니다. 그리고 이미할당된 변수에 다시 값을 할당할 수 있습니다.
    var korean = "Hangeul";
    console.log(korean) // Hangeul
    var korean = "Hangug-eo";
    console.log(korean) // Hangug-eo
  • let, const는 변수 선언할 때 사용한 이름으로 다시 선언할 수 없습니다. 이미 같은 이름의 변수가 있어서 에러가 발생합니다.
    let korean = "Hangeul";
    let korean = "Hangug-eo"; 
    // Uncaught SyntaxError: Identifier 'korean' has already been declared
    const ganadara = "ga,na,da,ra";
    const ganadara = "ma,ba,sa"; 
    // Uncaught SyntaxError: Identifier 'ganadara' has already been declared
  • let, const에도 차이가 있습니다. let은 값을 다시 할당할 수 있고, const는 변수 선언하면서 값을 할당해야지 그렇지 않으면 에러가 발생합니다.
    // let //
    let korean = "Hangeul";
    console.log(korean); // 'Hangeul'
    korean = "Hangug-eo";
    console.log(korean); // 'Hangug-eo;
    // const // 
    const ganadara;
    // Error message ---> Uncaught SyntaxError: Missing initializer in const declaration
    const ganadara = "ma,ba,sa";
    ganadara = "ganadara";
    // Error message ---> Uncaught TypeError: Assignment to constant variable.

2. 함수 스코프와 블록 스코프


  • 함수 내부에서 var, let, const로 선언한 변수는 함수 내부에서만 사용할 수 있습니다.

    var wolf = 3;
    let sheep = 0;
    
    function fence () {
      var wolf = 0;
      console.log('wolf_of_fence =', wolf); // wolf_of_fence = 0
      let sheep = 17;
      console.log('sheep_of_fence =', sheep); // sheep_of_fence = 17
    }
    fence();
    console.log('wolf_outside =', wolf); // wolf_outside = 3;
    console.log('sheep_outside =', sheep); // sheep_outside = 0;
  • 블록 스코프(if문, for문, while문, try/catch문 등) 내에서 선언한 변수는 블록 스코프 내에서 사용할 수 있습니다. var로 블록 스코프 내에서 변수 선언하면 전역 변수로 인식됩니다.
    var a = 1;
    console.log(a); // 1
    if (true) {
      var a = 1234;
      console.log(a); // 1234
    }
    console.log(a); // 1234
  • let과 const는 블록 스코프 내에서 변수 선언하면 블록 스코프내에서만 사용할 수 있고, 블록 스코프 외부에는 영향을 주지 않습니다.
    let b = 1;
    console.log(b); // 1
    if (true) {
      let b = 1234;
      console.log(b); // 1234
    }
    console.log(b); // 1

참고
https://poiemaweb.com/es6-block-scope
https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d
https://blueshw.github.io/2017/03/28/ES-var-VS-const-VS-let/