JS 筆記 - ES6 let 與 const 特性

let 與 const 宣告方式

在 ES6 中多了 let 跟 const 的變數宣告方式，而兩者都是宣告在區塊內的變數，現在我已經知道 let 是使用在 區塊中使用(也就是在大括號 {} 內)，用法的方式跟 var 一樣，只是不會汙染到全域，這相當重要。

而 const 宣告變數主要是用來作唯讀，也就是不能變更的資料，例如: AJAX 的連結。

下方有個簡單的例子：

let a = 1;
a = 2;
console.log(a); //2

這可以理解。如果換成 const，

const a = 1;
a = 2;
console.log(a); //2

在開發人員工具，就會出現跳錯的訊息，

Uncaught SyntaxError: Identifier 'a' has already been declared

所以只要是不能變更的資訊，就可以使用 const 來宣告。

鎖定 const 物件與陣列資料

但是用 const 宣告物件與陣列的資料時是可以改變其內容的，假設今天 const 一個物件，然後修改他，會發現內容的值變動了：

const obj = {
  url: "http://xxx.com",
};
obj.url = 1;
console.log(obj.url); //1

倘若不希望使其資料變動，可以加上一段語法 Object.freeze，就可以鎖住資料，不會被修改。

freeze: 凍結的意思

程式碼的位置要放在物件或陣列資料的後方:

const obj = {
  url: "http://xxx.com",
};
Object.freeze(obj); //將 obj 的資料或屬性鎖定，便不能修改
console.log(obj.url); //'http://xxx.com'
obj.url = 1;
console.log(obj.url); //'http://xxx.com'

陣列的鎖定資料語法也相同是 Object.freeze

let 與 const 的共同特性

沒有 Hoisting 向上提升的功能

使用 var 宣告變數的時候具備向上提升的功能，所以如果是這樣宣告，結果會如下：

console.log(a); //undefinded
var a = 1;
console.log(a); //1

因為 var 有向上提升的功能，在 JavaScript 是從上讀取到下的方式，其實會變成這樣的讀取：

var a; //尚未賦予 value
console.log(a); //undefinded
var a = 1;
console.log(a); //1

但如果將 var 改成 let 或是 const 都會變成跳錯的資訊。

Uncaught ReferenceError: Cannot access 'a' before initialization

不能重複宣告變數

在 var 中可以重複宣告變數，並且後面會取代前面的 value：

var b = 1;
var b = 2;
console.log(b); //2

但如果是 let 跟 const 就不能這樣使用，會變成跳錯的資訊：

let b = 1;
let b = 2;
console.log(b);
//Uncaught SyntaxError: Identifier 'b' has already been declared

不會出現在全域變數中

承上，因為 let 跟 const 只能在區塊中使用，所以在開發人員工具中輸入 window.b 或是 this.b 都不會找到 b 這個變數的值。

心得

ES6 發明了 let 跟 const 這兩個變數宣告方式，就是解決了原本 var 的宣告方式會汙染到全域變數，讓在不污染的前提下，可以做更好的資料管理與不必要的擔心。