在 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";