在 JavaScript 中用 var, let, 以及 const 有什麼差別？什麼時候該用哪個？

「在 JavaScript 中用 var, let, 以及 const 有什麼差別？」是在前端、JavaScript 面試中常見的考題。在面試時可以先大方向地列點說出異同之處，然後再針對每一個點進行深入說明。以下是以第一人稱撰寫的參考擬答。

var, let, 以及 const 都是在 JavaScript 用來做變數宣告的保留字，在 JavaScript 早期只有 var，直到 ES2015 (ES6) 時才加入了 let 與 const 。

他們之間主要有 4 個不同

1. 在作用域上，var 可以是全域、也可以是以函式作為範圍；let 與 const 則是以區塊作為範圍。
2. 在宣告上，var 可以被重複宣告，但是 let 與 const 則不行。
3. 在提升上，var 宣告的變數會自動初始化值為 undefined，因此在宣告前就使用變數，不會出現錯誤，而會是 undefined ；但是 let 與 const 宣告的變數則不會自動初始化，而是會進到暫時死區 (TDZ)，因此在 let 與 const 宣告變數前使用該變數，會出現錯誤。
4. let 與 const 在絕多數面向都是一樣，兩者的一大區別在於，用 let 宣告的變數可以重新賦值，但是用 const 的不行。

作用域的差別

在作用域上，var 可以是全域、也可以是以函式作為範圍，let 與 const 則是以區塊作為範圍。；當我們在一個文件的最外層使用 var 來宣告變數，這時它的範圍會是全域，因此當我們在 console 當中輸入

var greeting = "hello";

我們可以接著輸入

window.greeting; // "hello"

其結果會是 hello，但是用 let 與 const 宣告則不會有同樣效果。 而除了全域，var 在某個函式中範圍則是該函式。

var 可以重複宣告

在宣告上，var 可以被重複宣告，但是 let 與 const 則不行。所以當使用 var 時，可以做到以下這樣：

var greeting = "Hello! This ExplainThis :)";
var greeting = "ExplainThis is a website that helps you learn programming!";

let 可以重新賦值，但不能重複宣告，所以會如下面這樣：

// 不行這樣！不然會有 SyntaxError: Identifier 'greeting' has already been declared
let greeting = "Hello! This ExplainThis :)";
let greeting = "ExplainThis is a website that helps you learn programming!";

// 可以這樣 :)
let greeting = "Hello! This ExplainThis :)";
greeting = "ExplainThis is a website that helps you learn programming!";

提升上的差別

在提升上，var 宣告的變數會自動初始化，因此在宣告前就使用變數，不會出現錯誤，而會是 undefined ，例如下面這樣

console.log(greeting); // undefined
var greeting = "hi there";

但是 let 與 const 則不會，而是會進到暫時死區 (TDZ)，因此在 let 與 const 宣告變數前使用該變數，會出現錯誤：

console.log(greeting); // Uncaught ReferenceError: greeting is not defined
let greeting = "hi there";

let 可以重新賦值 const 不行

let 與 const 在絕多數面向都是一樣，兩者的一大區別在於，用 let 宣告的變數可以重新賦值，但是用 const 的不行。

特別注意，這邊指的差別是在於「賦值」，而不是改變某個變數。如果是改變某個變數，若該變數是原生值 (primitive values)，例如字串、數字，let 與 const 都不能改變；但假如該變數是物件 (objects)，則不論 let 或 const 在宣告後，都仍是可以改變該物件。

所以下面這個例子是可行的

const user = { name: "小明" };
user.name = "小王";
console.log(user); // {name: '小王'}

延伸問題：什麼時候該用 let ? 什麼時候用 const ?

關於這問題，沒有一個標準答案。業界目前普遍的觀點是多數時候都用 const，只有非得要重新賦值才用 let，甚至有一條 ESLint 的規則 prefer-const 是在規範這個寫法。

不過也有另一個觀點，例如 React 核心團隊的 Dan Abramov 就表示自己是看心情決定用哪一個，換句話說並沒有一個固定規則。當然他也提到如果團隊已經有某個使用的原則，那他會尊重團隊訂定出的使用原則，以程式碼的一致性為主。

這邊附上 Dan Abramov 分享這題的片段