JavaScript - let、const、var差異

過去的 JavaScript 使用”var“ 來做變數宣告，而在 ES6 中出現了”let“及”const“，它們的出現最主要是因為 區塊域(block) 的概念出現。

ES6的變異

總體而言，使用 let 與 const 的變數宣告方式，相較於 var 會更為嚴謹，因此建議在開發 ES6 之後的專案，使用let 與 const 作為變數宣吿，除了讓專案更穩定之外，也可以增加程式碼的可讀性。以下三點解釋：

1. 區塊限制使用
2. 變數「不」提升(hositing)
3. 不允許重複宣告

區塊限制使用

使用 var 作變數宣告，即使在區塊內宣告，仍可以在區塊之外取用。例：

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

如果是使用 let 或 const 作變數宣告，則會受到區塊限制，無法於區塊之外取用，會報錯。例：

if(true){
  let v2 = "hi";
  const v3 = "holla";
}
console.log(v2);//Error:Uncaught ReferenceError: v2 is not defined
console.log(v3);//Error:Uncaught ReferenceError: v3 is not defined

變數「不」提升(hositing)

javascript的執行環境分為兩階段，會先經歷創建階段(creation)，之後才正式進入程式碼執行階段(exection)。

變數提升指的是在創建階段，電腦的記憶體會為變數先空出記憶體，可是他還不知道它的值為何，會先給予一個undefined的值，而這個動作稱作「提升(hoisting)」/)，等到執行階段賦值時，才會將值放進記憶體中。因此在 var 變數宣告前，取用該變數是可以的，並不會報錯。例：

console.log(value);//undefined
var value = '1234';

然而，在 ES6 的 let 及 const 移除了 hosting 這個不直覺的現象，在宣告之前不得取用，否則會報錯。例：

console.log(value1);//Error:Uncaught ReferenceError: Cannot access 'value1' before initialization
console.log(value2);//Error:Uncaught ReferenceError: Cannot access 'value2' before initialization
let value1 = '1234';
const value2 = '5678';

不允許重複宣告

使用 var 重複宣告，並不會報錯，後者會覆蓋掉前者。例：

var value = '1234';
var value = '5678';
console.log(value);//5678

而在 ES6 的 let 及 const 則移除了這樣不嚴謹的規則，每個變數在該區塊內為獨立宣告，不可重複宣告。例：

let value1 = '1234';
let value1 = '5678';
console.log(value1);//Error: Identifier 'value1' has already been declared

const value2 = '1234';
const value2 = '5678';
console.log(value2);//Error: Identifier 'value2' has already been declared

綜合變因

在區塊限制與變數不提升的綜合，會形成的錯誤。例：

var value = "1234";
if (true) {
  value = '5678';//Error:Cannot access 'value' before initialization
  let value;
}

在 if 區塊中，使用了會受區塊限制的 let ，則在該區塊中的 value 不得在宣告之前使用。

let 與 const 的區隔

const

通常const 使用在識別職(identifier)，其意義為不會改變的常數，因此在一開始宣告就必須賦值，否則會出錯。例：

let value1;//undefined
const value2;//Error:Assignment to constant variable.

且若賦予一般的純值之後，即不可再被更動。

const value = '1234';
value = '5678';//Error:Assignment to constant variable.

const obj = {
    name:'Amy',
    age:'22',
};
obj = {
    name:'John',
    age:'25',
}
console.log(obj.name);//Error:Assignment to constant variable.

然而，如果是給予物件、陣列的值，在該變數的記憶體存放位置不變的情況之下，是可以變動的。例：

const obj = {
    name:'Amy',
    age:'22',
};
obj.name = 'John';
console.log(obj.name);//John