JavaScript - var, let, const의 차이

1. let, const는 ES6에서 추가된 문법

2. var는 기존에 있던 문법

 

let, const와 var의 차이를 이해하려면 hoisting, scope에 대한 개념이 필요하다.

 

먼저 기존의 var에 대해서 알아보자.

 

1. var

var는 기존 문법으로 매우 유연하고 관대한 녀석이다.

그런데 너무 관대해서 문제도 좀 있었다.

 

1-1. scope

var의 scope는 function이다.

 

var a = 'im free'

function imLockedUp () {
  var a = 'im locked up'
  console.log(a)
}

imLockedUp()
console.log(a)

결과

if(true){
  var a = 'im free'
}

console.log(a)

결과

 

위 예제들로 var의 scope를 명확히 알 수 있다.

 

1-2. 지나친 관대함

var는 이런 것도 허락한다.

var a = 'i am a'
var a = 'i am THE A'

console.log(a)

 

결과

선언을 두번이나 했는데 아무렇지 않게 작동한다.

기존과 다른 scope와 지나친 유연함 때문에 긴 코드에서 오류를 발생시키도 하고 찾기도 힘들었다.

 

그래서 ES6에서 추가된 것이 let과 const다. 

 

2. let

언급했듯 let은 ES6에서 새로 추가 된 문법이다. var와의 차이점을 알아보자.

 

1-1. Scope

let의 scope는 블럭( { } )이다.

 

if(true){
  let a = 'im locked up'
}

console.log(a)

결과

1-2. 두 번 선언도 안 된다.

기본적으로 let, const는 두 번 선언같은 행동을 허용하지 않는다.

let a = 'im a'
let a = 'i am THE A'

console.log(a)

결과

 

즉! 우리가 알던 보편적인 형태의 변수라고 생각해도 된다. 

적당히 제한적이어서 오류를 잡을 때 명확히 이유를 알려주는 좋은 형태다.

 

3. const

const는 let과 비슷하다. 한 가지 다른점은 'constance', 재정의가 안된다는 것이다. java의 final과 비슷하다.

 

1-1. scope

let과 마찬가지로 block scope다.

 

2-2. 재정의 안 됨

let a = 'im not ready'
a = 'im ready'

console.log(a)

const b = 'im not ready'
b = 'im ready'

console.log(b)

결과

var, let, const의 차이를 알아보았다. 

ES6 문법이라도 우리에겐 babel이 있으니까 가독성 좋게, 논리적으로 ES6문법을 활용하자.