var，const，let

變量聲明：var，const，let

在JavaScript中，有三個關鍵字可用於聲明一個變量，而且每一個關鍵字都有其不一樣之處。那些是var，let並且const

簡短的解釋

使用const關鍵字聲明的變量不能被從新賦值，let並且var能夠。

	範圍	從新賦值	易變的	暫時性死區
const	塊	否	是	是
let	塊	是	是	是
var	功能	是	是	否

示例代碼

const person = "Nick";
person = "John"; // Will raise an error, person can't be reassigned 複製代碼

let person = "Nick";
person = "John";
console.log(person); // "John", reassignment is allowed with let
複製代碼

詳細的解釋

變量的範圍大體意味着「代碼中可用的變量的做用域」。

var

var聲明的變量是函數做用域的，這意味着當在函數中建立變量時，該函數中的全部內容均可以訪問該變量。此外，函數中建立的函數做用域變量不能在此函數以外訪問。

示例代碼

function myFunction() {
  var myVar = "Nick";
  console.log(myVar); // "Nick" - myVar is accessible inside the function
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.
複製代碼

function myFunction() {
  var myVar = "Nick";
  if (true) {
    var myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being function scoped, we just erased the previous myVar value "Nick" for "John"
  }
  console.log(myVar); // "John" - see how the instructions in the if block affected this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.
複製代碼

這部分代碼:

console.log(myVar) // undefined -- no error raised
var myVar = 2;
複製代碼

在執行中被理解爲：

var myVar;
console.log(myVar) // undefined -- no error raised
myVar = 2;
複製代碼

let

var和let大體相同，但let聲明的變量

• 是塊範圍
• 不存在變量提高
• 不能在同一範圍內從新聲明

示例代碼

function myFunction() {
  let myVar = "Nick";
  if (true) {
    let myVar = "John";
    console.log(myVar); // "John"
    // actually, myVar being block scoped, we just created a new variable myVar.
    // this variable is not accessible outside this block and totally independent
    // from the first myVar created !
  }
  console.log(myVar); // "Nick", see how the instructions in the if block DID NOT affect this value
}
console.log(myVar); // Throws a ReferenceError, myVar is not accessible outside the function.
複製代碼

如今，let（和const）變量在分配前不可訪問的含義是什麼：

// var 的狀況
console.log(foo); // 輸出undefined
var foo = 2;

// let 的狀況
console.log(bar); // 報錯ReferenceError
let bar = 2;
複製代碼

與var變量相比，若是在分配以前嘗試讀取或寫入let或const變量，則會引起錯誤。這種現象一般稱爲暫時性死區或TDZ。

另外，你不能從新聲明一個let變量：

let myVar = 2;
let myVar = 3; // Raises a SyntaxError
複製代碼

const （常量）

const聲明的變量行爲就像let變量同樣，但也不能被從新賦值。 總結一下，const變量：

• 是塊範圍
• 在賦值以前不可訪問
• 不能在同一範圍內從新定義
• 不能從新賦值

實例代碼

const myVar = "Nick";
myVar = "John" // raises an error, reassignment is not allowed
複製代碼

const myVar = "Nick";
const myVar = "John" // raises an error, re-declaration is not allowed
複製代碼

但有一個微妙之處：const變量不是不變的！具體而言，這意味着對象和數組 const聲明的變量可能會發生變化。

對於對象:

const person = {
  name: 'Nick'
};
person.name = 'John' // this will work ! person variable is not completely reassigned, but mutated
console.log(person.name) // "John"
person = "Sandra" // raises an error, because reassignment is not allowed with const declared variables
複製代碼

對於數組:

const person = [];
person.push('John'); // this will work ! person variable is not completely reassigned, but mutated
console.log(person[0]) // "John"
person = ["Nick"] // raises an error, because reassignment is not allowed with const declared variables
複製代碼

參考資料

• let 和 const 命令
• let和const如何在JavaScript中定義範圍 - WesBos
• 暫時性死區（TDZ）揭祕