var let const 三者有什麼差異呢？

入門前端時，買過一些課程，也包含 Javascript，但課程中沒有提到 let 及 const，後續許多範例中，較多使用 let 及 const，本篇來解解疑惑，整理一下三者的差異。

總體而言，ES6 新的宣告方式 let 及 const，比起 ES5 當中的 var 更爲嚴謹。主要可以由以下三項解釋。

1. 塊級區域
2. 變量提升
3. 不允許重複宣告

塊級區域

使用 var 時，若在塊級區域宣告，仍然可以在塊級區塊之外拿取。如下：

{
  var v1 = "hello";
}
console.log(v1); //hello

如果是使用 let 或 const，則受塊級區域限制，無法於塊級區塊之外拿取，會報錯。如下：

{
  let v2 = "hi";
}
console.log(v2);
//Uncaught ReferenceError: v2 is not defined at ES6.js:9
{
  const v3 = "hehe";
}
console.log(v3);
//Uncaught ReferenceError: v3 is not defined at ES6.js:14

變量不提升

以往在使用 var 時，有一個不太直覺的特性，在宣告前使用是可以的，不會報錯，例如：

console.log(v4); // undefined
var v4 = 5 ;

上述範例中，是很經典變量提升現象。使得 v4 在使用前就存在，只是尚未被賦予值。

而在 ES6 let 及 const，移除這個不直覺的現象，在宣告前不能使用，會報錯。如下：

console.log(v4); 
//Uncaught ReferenceError: v4 is not defined at ES6.js:19
let v4 = 5 ;
console.log(v5);
//Uncaught ReferenceError: v5 is not defined at ES6.js:23
const v5 = 5 ;

在塊局區域限制及變數不提升綜合之下，會形成一些錯誤，如下：

var v9 = "hello";
if (true) {
  v9 = 'abc';
  //Uncaught ReferenceError: v9 is not defined at ES6.js:37
  let v9;
}

因 if 產生了一個塊級區域，裡面使用了會被塊級區域限制的 let，因此在塊級區域的 v9，在 let 宣告前使用，不被允許，因此報錯。

不允許重複宣告

使用 var 即使重複宣告也不會報錯，只會被後面宣告者覆蓋，如下：

var v6 = 5;
var v6 = 7;
console.log(v6); //7

但使用 ES6 let 及 const，移除這個不嚴謹的邏輯，每個變數在特定區塊下應該爲獨立的。

let v7 = 5;
let v7 = 7;
console.log(v7);
//Uncaught SyntaxError: Identifier 'v7' has already been declared
const v8 = 5;
const v8 = 7;
console.log(v8);
//Uncaught SyntaxError: Identifier 'v8' has already been declared

Const

const 比 let 更爲不同，因其意義爲不變的常量，因它代表特定意義，因此在宣告時，就要給它值，否則會報錯。

const v10;
//Uncaught SyntaxError: Missing initializer in const declaration

在一般純值中，一旦它被賦值後，就不能被更動。

const v11 = 4;
v11 = 5; 
//ES6.js:44 Uncaught TypeError: Assignment to constant variable.
  at ES6.js:44

而在複合類型中，例如物件，其常量的意義衍生爲位址不變，其值是可以變動的。

const v12 = {name:"lai"};
v12.name = "laiii";
console.log(v12.name); //laiii
v12 = {age:25};
//Uncaught TypeError: Assignment to constant variable.
  at ES6.js:49

以上爲 var、let、const 的整理與理解:)