var, const, let 차이점 비교 및 사용 방법

const는 ES6에서 새로 도입한 것으로 한번 지정하고 나면 변경이 불가능한 상수를 선언할 때 사용하는 키워드이며, let은 동적인 값을 담을 수 있는 변수 값을 선언할 때 사용하는 키워드입니다.

 

ES6 이전에는 var 키워드를 사용했는데요, var 키워드는 사용할 수 있는 범위가 함수 단위였습니다.

function fun1() {
    var val = 'hello'
    if(true) {
      var val = 'bye'
      console.log(val) //bye
    }

    console.log(val) //bye
}

실제 결과

bye
bye

 

위의 결과를 보면 5라인에서 출력한 변수 값은 bye가 출력되고, {} 불럭이 끝난 8라인에서는 'hello'가 'bye' 가 출력되는 것을 볼 수 있습니다. 이유는 위에서도 언급했듯이 var 키워드는 scope이 함수단위이기 때문에 블럭이 끝났지만, 값이 유지 되기 때문에 블럭 안에서 입력된 bye가 유지되기 때문에 'bye' 가 출력 되었습니다.

 

이런 결점을 해결하기 위해서 나온 것이 let 과 const 입니다.

 

function fun2() {
  let a = 1
  if(true) {
    let a = 2
    console.log(a)
  }
  console.log(a)
}

실제 결과

2
1

위의 결과가 var 과는 다르게 8라인에서 출력된 값이 블럭 안에서 입력된 2이 값이 아닌 1이 출력되는 것을 볼 수 있습니다. 이유인즉, let과 const는 scope 함수가 아닌 블럭단위 이기 때문입니다.

 

또한, let과 const는 같은 블럭 내에서는 중복이 허용되지 않습니다.

  let a = 1
  const a = 1

위와 같이 let과 const가 중복이 되면 아래와 같이 컴파일 시 에러가 발생하게 됩니다.

Failed to compile.

./src/App.js
  Line 15:9:  Parsing error: Identifier 'a' has already been declared

  13 | function fun2() {
  14 |   let a = 1
> 15 |   const a = 1
     |         ^
  16 |   if(true) {
  17 |     let a = 2
  18 |     console.log(a)

 

또한, const는 앞서 말했듯이 변경이 불가한 상수 값이기 때문에 선언 이후에 값을 변경하려고 하면 컴파일 에러가 발생하게 됩니다. 

function fun2() {
  const a = 1
  a = 1
  if(true) {
    let a = 2
    console.log(a)
  }
  console.log(a)
}

아래 처럼 const a 선언 이후에 임의 값을 입력하게 되면 아래와 같이 컴파일 에러가 발생하게 됩니다.

 

App.js:15 Uncaught TypeError: Assignment to constant variable.
    at fun2 (App.js:15)
    at App.render (App.js:30)
    at finishClassComponent (react-dom.development.js:18470)
    at updateClassComponent (react-dom.development.js:18423)
    at beginWork$1 (react-dom.development.js:20186)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at beginWork$$1 (react-dom.development.js:25780)
    at performUnitOfWork (react-dom.development.js:24698)
    at workLoopSync (react-dom.development.js:24671)
    at performSyncWorkOnRoot (react-dom.development.js:24270)
    at scheduleUpdateOnFiber (react-dom.development.js:23698)
    at updateContainer (react-dom.development.js:27103)
    at react-dom.development.js:27528
    at unbatchedUpdates (react-dom.development.js:24433)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:27527)
    at Object.render (react-dom.development.js:27608)
    at Module../src/index.js (index.js:7)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object.1 (serviceWorker.js:137)
    at __webpack_require__ (bootstrap:785)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

그럼 var, let, const는 언제 사용해야 할까요?

var는 ES6에서는 사용할 일이 없습니다. 값을 변경하지 않아도 되는 경우에는 const를 사용하시면 되고, 선언 이후에 값을 변경하고자 하는 경우에는 let을 사용하시면 됩니다. var는 scope이 함수 단위이기 때문에 let과 const와 함께 사용하게 되면 혼동만 되기 때문에 사용하는 것을 추천드리지 않습니다. 

 

 

그럼 정리를 하면, var VS let, const 의 차이점은 사용 범위이다. var는 함수단위, let과 const는 블럭 {} 단위 이다. 그리고 let VS const의 차이점은 변경 가능한 변수와 변경 불가한 상수 값 차이이다.