var vs let vs const 의 차이점

 var 는  function-scoped  이고,

 let ,  const  는  block-scoped  입니다.

여기서  function-scoped  과  block-scoped 가 무엇인가는 스코프 관련글에서 설명 드리겠습니다.

 var (function-scoped) 

// var는 function-scope이기 때문에 for문이 끝난다음에 a를 호출하면 값이 출력이 됩니다.
// 이건 var가 호스팅 되었기 때문입니다.
for(var a=0; a<10; a++) {
  console.log('a', a);
}
console.log('after loop a is ', a); // after loop a is 10


// 아래의 경우에는 에러가 발생합니다.
function counter () {
  for(var a=0; a<10; a++) {
    console.log('a', a);
  }
}
counter();
console.log('after loop a is', a); // a is not defined

그럼 항상 function을 만들어서 호출해야 될까? 그건 아닙니다.

javascript에서는  immediately-invoked function expression (or IIFE, pronounced "iffy")  라는 것이 존재합니다.

 IIFE 는 IIFE 관련글에서 설명 드리겠습니다.

// IIFE를 사용하면
// a is not defined가 뜬다.
(function() {
  // var 변수는 여기까지 호스팅이 됩니다.
  for(var a=0; a<10; a++) {
    console.log('a', a);
  }
})()
console.log('after loop a is', a) // a is not defined

javascript는 여기서 좀 재밌는 부분이 있습니다.

 IIFE 는  function-scope  처럼 보이게 만들어주지만 결과가 같지가 않습니다.

// 이 코드를 실행하면 에러없이 after loop a is 10이 호출됩니다.
(function() {
  for(a=0; a<10; a++) {
    console.log('a', a)
  }
})()
console.log('after loop a is', a) // after loop a is 10

위 코드가 에러 없이 실행되는 이유는 a 가 호스팅이 되어서  global variable(글로벌 변수) 가 되었기 때문입니다.

그래서 아래와 같이 된 것입니다.

var a
(function() {
  for(a=0; a<10; a++) {
    console.log('a', a)
  }
})()
console.log('after loop a is', a) // after loop i is 10

 IIFE 는 쓰는데 이렇게 호스팅이 된다면 무슨 소용일까?

그래서 호스팅을 막기 위해  use strict 를 사용했습니다.

// 아까랑 다르게 실행하면 a is not defined라는 에러가 발생합니다.
(function() {
  'use strict'
  for(a=0; a<10; a++) {
    console.log('a', a)
  }
})()
console.log('after loop a is', a) // a is not defined

변수 선언때문에 너무 많은 일을 하지않나 싶습니다

 let  과  const 를 알아보면

 let, const (block-scoped) 

 ※ es2015에서는 let, const가 추가 되었습니다. 

javascript에서는 그동안  var 만 존재했었기 때문에 아래와 같은 문제가 있었습니다.

// 이미 만들어진 변수이름으로 재선언했는데 아무런 문제가 발생하지 않습니다.
var a = 'test'
var a = 'test2'

// 호스팅으로 인해 에러가 안납니다.
c = 'test'
var c

위와 같은 문제점이 있습니다.

하지만  let , const 를 사용하면 var를 사용할때보다 상당히 이점이 있습니다.

 let 과 const 의  공통점 은 var와 다르게 변수 재선언이 불가능하다는 점이 있고,

 let 과 const 의  차이점 은 변수의 immutable 여부가 다릅니다.

 let 은 변수에 재할당이 가능하지만,

 const 는 변수 재선언, 재할당 모두가 불가능하다는 점이 있습니다.

// let
let a = 'test'
let a = 'test2' // Uncaught SyntaxError: Identifier 'a' has already been declared
a = 'test3'     // 가능

// const
const b = 'test'
const b = 'test2' // Uncaught SyntaxError: Identifier 'a' has already been declared
b = 'test3'    // Uncaught TypeError:Assignment to constant variable.

 let 과  const 가 호스팅이 발생하지 않는건 아닙니다.

 var 가  function-scoped 로 호스팅된다면,

 let 과  const 는  block-scoped 단위로 호스팅이 일어나는데

c = 'test' // ReferenceError: c is not defined
let c

위에 코드에서 ReferenceError가 발생한 이유는  tdz(temporal dead zone)  때문입니다.

 let 은 값을 할당하기전에 변수가 선언 되어있어야 하는데 그렇지 않기 때문에 에러가 나는겁니다.

이건  const도 마찬가지인데 const가 더 엄격합니다. 

// let은 선언하고 나중에 값을 할당이 가능하지만
let dd
dd = 'test'

// const 선언과 동시에 값을 할당 해야합니다.
const aa // Missing initializer in const declaration

이렇게  javascript tdz가 필요한 이유는 동적언어이다 보니까 runtime type check가 필요해서  입니다.

출처(https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d)