var, let, const

변수를 선언하는데 사용되는 세 가지 키워드(ES6이전에 사용하던 var와 ES6이후에 나온 let, const)에 대해 비교한다.

 

중복선언

var는 중복선언이 가능하지만 let, const는 불가능하다.

var name = 'jaewoo'
console.log(name) // jaewoo

// redeclaration is possible
var name = 'jaewoo2'
console.log(name) // jaewoo2

let name = 'jaewoo'
console.log(name) // jaewoo

// no redeclaration
let name = 'jaewoo2' // Uncaught SyntaxError: Identifier 'name' has already been declared

 

Scope

var는 function level scope, let, const는 block level scope

var a = 1
if (true) {
  var a = 5 // var는 함수 레벨 스코프이기 때문에 새로운 변수가 아닌 재선언으로 동작함
}
console.log(a) // 5

let a = 1
if (true) {
  let a = 5 // if block 내에서만 5라는 값이 보인다.
}
console.log(a) // 1

 

Hoisting

둘 다 hoisting은 되지만(js의 모든 선언문은 hoisting 된다.), var는 선언과 초기화가 동시에 일어나고 let, const는 변수 선언문에서 초기화를 한다.

자바스크립트에서 변수의 선언은 선언, 초기화 단계를 걸쳐 수행된다.

• 선언: 변수명을 등록하여 js engine에게 존재를 알림
• 초기화: 변수의 메모리 공간을 확보하고 undefined를 할당함

 

console.log(name) // output: Uncaught ReferenceError: name is not defined
let name = 'jaewoo'

런타임 이전에 name이라는 변수는 hoisting되어 선언이 되지만 초기화가 되지 않는다. 초기화가 되지 않은 변수에 접근하게 되면 referenceError가 발생한다. 이처럼 스코프의 시작 지점부터 변수의 선언문까지는 변수를 참조할 수 없는데 이 구간을 TDZ(temporal dead zone)이라고 부른다.

 

console.log(name); // undefined
var name;
console.log(name); // undefined
name = 'jaewoo'
console.log(name); // jaewoo

반면에 var로 선언한 변수는 초기화까지 hoisting되어 진행되기 때문에 선언문 전에 참조해도 에러 없이 undefined라는 값을 얻을 수 있다.