[JavaScript] 變數宣告 let, const 和 var 的不同

Juju 的自學筆記
3 min readApr 19, 2021

--

參考來源:https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript#variables

let

從 ECMAScript 2015 開始出現。

能宣告只在 Block Scope 區域內(就是花括 {} 內)有效的變數,例如:

只有在 for 裡面才看得到用 let 宣告的變數 myLetVariavle。

const

從 ECMAScript 2015 開始出現。

也跟 let 一樣能宣告只在 Block Scope內有效的變數,差別在用 const 宣告的變數是常數,宣告後就不能再修改:

var

在 ECMAScript 2015 出現 let 和 const 前,只能用 var 宣告變數。

以 function 為判斷基礎,沒有區塊的概念:

因此上面這個例子,對 var 來說不管在 for 區塊內或外,都是可見的。

只有 function 外的區域,才無法使用在 function 內用 var 宣告的變數。

這是因為 JavaScript 與 Java 之類的其他語言不同,JavaScript 只有 function 才有作用域。

setTimeout 範例

for (var i = 0; i < 5; i++) {
setTimeout(() => console.log(i), 1000);
}

輸出結果為:
5
5
5
5
5

for (let i = 0; i < 5; i++) {
setTimeout(() => console.log(i), 1000);
}

輸出結果為:
0
1
2
3
4

為什麼會有這兩種不同的輸出結果?

首先要知道 setTimeout 是 web api。

當 JavaScript 執行時遇到 web api,會先將它移出 stack,待 web api 處理完再將之放到 queue 中等待。

直到 stack 中的程式碼執行完畢,Event Loop 才會依序執行 queue 中的 callback function。

之前有寫一篇探討 JavaScript 的非同步有更深入討論 Event Loop:

所以當 setTimeout 的 callback function 被執行到時,會先去區域({}花括內)找看看有沒有 i 這個區域變數(local variable)。

i 用 let 宣告,就可以在區域找到對應的值,所以用 let 宣告可以得到預期的結果。

而用 var 宣告,在區域中找到的就會是 global 變數的 i,因此全部結果都是 5。

--

--

No responses yet