[javascript] var, let, const 차이 ( 완벽 이해 )

먼저 셋의 차이를 보자

/* var */
var a = 'test';
var a = '1';            //정상
​
/* let */
let a = 'test';
let a = '1';            // 에러
​
/* const */
const a = 'test';
const a = '1';          // 에러

/* var */
c = 'test';
var c;                      // 정상
​
/* let */
c = 'test';
let c;                      // 에러
​
/* const */
c = 'test';
const c;                // 에러

/* var */
let a = 'test'
a = '1'            // 가능
​
/* let */
let a = 'test'
a = '1'            // 가능
​
/* const */
const b = 'test'
b = '2'            // 불가능

결론먼저 말하면 셋의 차이를 모르면 let을 사용하는게 좋을 듯 

위에 예제만 보면 var가 제일 좋아보이는데 let 이나 const를 사용하라 하는가. 

아래 var를 쓰면 무슨 문제가 있는지 설명되어 있다.  

.

.

.

.

호이스팅이란? 링크

변수

var test = 1;
let variable = 'test';
const str = 'text';

• ES6(ES2015) 이전에는 var 뿐이였는데 ES6에서 let, const 가 추가됨

• var 는( function-scoped)

• let,const 는 ( block-scoped )

var (function-scoped)

• var가 hoisting이 되었기 때문에 정상적으로 출력

// var는 function-scope이기 때문에 for문이 끝난다음에 j를 호출하면 값이 출력이 잘 된다.
for(var j=0; j<10; j++) {
        console.log('j', j)
}
console.log('after loop j is ', j) // after loop j is 10

• 아래는 에러가 발생

function counter () {
    for(var i=0; i<10; i++) {
        console.log('i', i)
      }
}
counter()
console.log('after loop i is', i) // ReferenceError: i is not defined

• IIFE( immediately-invoked function expression )를 사용 했을 때

  • 예상 : hoisting 범위로 에러 발생

  (function() {
          // var 변수는 여기에 hoisting
          for(var i=0; i<10; i++) {
          console.log('i', i)
          }
  })()
  console.log('after loop i is', i) // ReferenceError: i is not defined

  
  

  • 결과 : 정상 출력

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

  
  

  • 이유 : i가 function 위로 hoisting되어 global variable 이 되었기 때문

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

  
  

• 위와 같은 상황으로 발생할 수 있는 문제

  // 이미 만들어진 변수이름으로 재선언했는데 아무런 문제가 발생하지 않는다.
  var a = 'test'
  var a = 'test2'
  ​
  // hoisting으로 인해 ReferenceError에러가 안난다.
  c = 'test'
  var c

  
  

let,const ( block-scoped )

• 두개 공통점 : 변수 재선언 불가능

• 두개 차이점 : 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.

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

• let, const는 block-scoped 단위로 hoisting이 일어난다

• 값을 할당하기 전에 선언되지 않아서 ReferenceError 가 발생

• const는 선언과 동시에 값을 할당 해야한다.

// let은 선언하고 나중에 값을 할당이 가능하지만
let dd
dd = 'test'
​
// const 선언과 동시에 값을 할당 해야한다.
const aa // Missing initializer in const declaration

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