이 포스트는 let 과 var의 차이점에 대해 아주 상세하게 잘 쓰여진 다음 링크를 참고하여 작성하였다.

1. Scoping rules

function run() {
  var foo = "Foo";
  let bar = "Bar";

  console.log(foo, bar); // Foo Bar
  {
    let baz = "Bazz";
    console.log(baz); // Bazz
  }
  console.log(baz); // ReferenceError
}

run();

let으로 선언된 변수 baz는 변수가 선언된 {} 밖에서 불렸을 때 reference error가 난다.

var로 선언된 변수들은 사용 범위가 function body (function scope)이다.
let으로 선언된 변수들은 사용 범위가 {} 안 (block scope)이다.

2. Hoisting

호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다.

function run() {
  console.log(foo); // undefined
  var foo = "Foo";
  console.log(foo); // Foo
}

run();

var로 선언된 변수는 선언문 전에 호출되면 undefined로 지정된다.

function checkHoisting() {
  console.log(foo); // ReferenceError
  let foo = "Foo";
  console.log(foo); // Foo
}

checkHoisting();

반면에 let으로 선언된 변수는 선언문 전에 호출되면 ReferenceError 를 일으킨다.

var: hoisting 해줌. 그러므로 변수의 값이 지정되기 전에 접근하면 undefined
let: hoisting 없음. 그러므로 변수의 값이 지정되기 전에 접근하면 ReferenceError

참고로 const도 hoisting이 없다.

3. Redeclaration

'use strict';
var foo = "foo1";
var foo = "foo2"; // 'foo'의 값이 "foo1"에서 "foo2"로 자동 대체된다

let bar = "bar1";
let bar = "bar2"; 
// SyntaxError: Identifier 'bar' has already been declared 
// ('bar'가 이미 선언되었다는 뜻)

var로 선언된 변수는 재선언시 대체가 가능하지만
let은 이런 경우에 SyntaxError를 발생시킨다.
즉 var는 재선언(redeclaration)이 가능하고 let은 안된다.