ES6 Let 、 Const 是什麼?│鼠年全馬鐵人挑戰 #06

4 min readMar 8, 2020

Let 、 Const 跟我們過去使用 var 一樣都是用來宣告變數的。

那為什麼 ES6 不延續用 var 來宣告變數呢?主要是為了讓開發更順利、更有效率。

使用 var 宣告變數會有一個小問題!

比如說，使用 var 來宣告 apple 這個變數，可能開發到很後面，我們就會忘掉前面已經使用過 var 來宣告 apple (同名稱)過了。而 var 的特性就是後面宣告的變數可以覆蓋掉前面的變數，但我們通常在開發的時候都不會是這個本意，是希望在另外宣告一個變數來執行，不是將前面的覆蓋掉。

var apple = "蘋果";var apple  = "蘋果2";

很明顯的，var apple = "蘋果2"; 會覆蓋掉 var apple = "蘋果";。

而 ES6 的 let 跟 const 就是要來解決 var 這個困擾的。

let

Let 所宣告的變數是可以修改它的值；Const 是不能修改宣告變數的值。

我們可以對 let 所宣告的變數重新賦予值。

let apple = "蘋果";apple = "我是蘋果";

console apple 的結果就會是 "我是蘋果"

從上面的範例來看好像跟 var 宣告的感覺差不多?!

但是 let 也有一個規範跟 var 不一樣，那就是 let 不能在同一個作用域重複做宣告。而 var 可以讓後面宣告的變數覆蓋掉前面宣告的!

var 的作用域是「函式的作用域」；let 的作用域是「block 作用域」限制在 {} 之間

let apple = "蘋果";let apple = "我是蘋果";

console 的結果會跳出錯誤。

let apple = "蘋果";{
    let apple = "我是蘋果";   // 跟上面的 let apple 不屬於同個作用域
}console.log(apple);

這題 consle 出來的結果會是 “蘋果” ，因為我們 console.log 的時候是 console 到外面那個作用域的 let，而不是 { } 區塊當中的 let。

總之，外層是無法存取 { } 區塊內的變數。

Butttttt!!! Const 是不能修改宣告變數的值。

如果我們把上面範例中的 let 改成 const 就不能重新賦予值了。

const apple = "蘋果";apple = "我是蘋果";

console 的結果會跳出錯誤。

用 var 的時候，setTimeout 會先放到事件佇列當中，等到所有程式碼執行後才執行 setTimeout 這段的程式碼，因此 setTimeout 當中的 i 屬於全域的值 (10)，並不是 for 迴圈當中的 i 。

for (var i = 0; i < 10; i++){
    setTimeout(function(){
        console.log('第' + i + '次');
    },10);
}console.log(i);

console 結果 :

2. 用 let 的時候，改善了 var 的問題。let 不會產生全域變數，作用域只有在 {} 這個 block 當中，所以 setTimeout 執行時可以取到正確述職的 i。

for (let i = 0; i < 10; i++){
    setTimeout(function(){
        console.log('第' + i + '次');
    },10);
}console.log(i);

console 結果 :

let 會提升，但是在提升的時候並不會給變數賦予 undefined 。而是出現暫時性死區 (TDZ)，所以無法去存取變數。