[ES6] var、let、const 學習心得

前言

此篇文章是要介紹，在學習 React 之前，一定要知道的 JavaScript ES6 語法 (之後會簡稱為 JS or ES6)，這是因為在撰寫 React 時，一定都是在撰寫 JS 程式碼，像筆者很習慣地寫 jQuery 程式碼，在 React 就幾乎派不上用場，而且整個團隊的開發也已講好，也一定會以 ES6 撰寫模式為優先，所以，也趁機會參加六角的鼠年全馬鐵人挑戰，也把自己所學到的前端知識，一邊整理寫成文章，一邊培養自己的能力，以求未來更好的發展。

這個章節將會講到 var、let、const ( let、const為 ES6 新增加的宣告指令 )三者宣告指令的特性及變數可被參考的區域也就是所謂的變數作用範圍 (Scope)。

何謂變數作用範圍 ?

在撰寫 JS 程式碼時，所宣告變數的位置不同就會影響該程式碼中變數的使用方式。如果我們將變數宣告在函式裡，那麼此變數就僅能在該函式中使用，這就是所謂的變數作用範圍。JS 的作用範圍可分為以下兩類。

• 可在整個程式中參考的全域範圍。
• 只能在定義的函式中參考的區域範圍。

簡單地用白話的方式來講，又可以以下兩類。

• 在函式外宣告的變數 => 全域變數。
• 在函式內宣告的變數 => 區域變數。

範例一

宣告時必須加上 var 的理由為何 ?

如果在宣告變數時，忘記加上 var 會發生什麼事呢 !?

範例二

1. 第一個要說明的是程式可以正常運作，是不會有錯誤發生的。
2. 第二個要說明的是在範例二中第七行要印出的是 failed ，但是確印出 ok，這是因為第一行定義的全域變數被第三行中定義的變數覆蓋了。
3. 由第二點的結果我們得知未使用 var 指令宣告的變數，都會被視為全域變數。
4. 所以，最後我們可以推論，一定要用 var 指令定義區域變數。

要注意區域變數宣告的順序 !

程式碼都是由上而下一行一行讀下來的，這裡的範例是指如果，全域變數及區域變數在還未宣告時，而先輸入了 console.log，哪這個時候又會出現什麼狀況呢 !?

範例三

• 第一行 console.log(status) 會印出 failed，雖然還未讀到宣告為 status 為 failed，但因為這是全域變數的特性，我們又可以稱為提升 (hosting)。
• 第四行 console.log(status) 會印出 undefined (未定義)，這是因為在 JS 中區域變數在函式整體內有效，卻尚未執行變數指派，所以區域變數 status 的內容是undefined (未定義)，因此，得知一個結論區域變數要在函式開始時先宣告。

支援區域範圍的 let、const 指令

ES6 新增了支援區塊範圍的 let、const 宣告指令，首先簡單的舉以下範例說明。

範例四

• 由於以 let、const 指令宣告的變數在區塊外無效，因此會出現錯誤 (customer is not defined) and (city is not defined)。
• 因此，在 ES6 之後的環境中，撰寫 JS 程式碼時會選擇一般程式設計『盡可能限定範圍』的規則，強烈建議使用 let、const 指令來取代 var 指令。

我們整理了 var、let、const 三者的變數作用範圍：

• var：scope
• let、const：block

範例五

• var 的宣告範圍為 scope，以上是 block 而不是 function 就不需要執行，console 會印出 2 跟 2。
• let、const 的宣告範圍為 block，console 會印出 2 跟 1。

結論

以現在這個時候在撰寫 JavaScript 程式碼時，請務必使用 let、const 來取代 var，避免 var 的特性導致錯誤發生，結果花了很多時間 debug，這是很得不償失的。

還要特別注意 const 宣告指令的特性，一旦使用了 const 宣告一個變數，就不能再使用該變數宣告其他的值，這也是會有錯誤的，反之 let 就沒有這個問題。