JS 變數提升(Hoisting)

JS 中的變數提升 Hoisting

之前於JS基本函式概念有撰寫過，由於此觀念非常重要，特別將筆記獨立出來。

什麼是 hoisting

於之前筆記提升 Hoisting說明:
關於提升的概念，覺得比較明瞭的說法參考至卡斯伯-鐵人賽：JavaScript Function 與 Hoisting

提升比較類似於變數和函式的宣告先被放入記憶體，以上述引用的連結文章來說明，以白話說明，就像是一本筆記本列了多項要做的項目，但作者翻閱筆記本並不是要開始做，而是類似備忘錄的概念，先記在腦子裡，所以，
以文章中的舉例來說:

假如變數尚未被宣告，而使用console.log()印出，會顯示此變數未被定義。

1 console.log(phone); // phone is not defined

假如在var 定義變數前使用console.log()，那麼將會顯示undefined，表示已經存入記憶體，但尚未有值。

1 console.log(phone); // undefined
2 var phone = 'myphone';

也就是我們可以解讀為以下的樣子:

1 var phone;//只有宣告語法被存入記憶體之中
2 console.log(phone); // undefined
3 var phone = 'myphone';

因此，因為這樣變數提升的特性，請必須將變數都盡量在scope的最上面先宣告完成再使用。

參考資料:重新認識 JavaScript: Day 10 函式 Functions 的基本概念

函式的 Hoisting

在函式概念中也是一樣的，如果在函式(function)未由var定義之前使用 console.log() 則會出現 undefined，
以下範例:

console.log( `1:`, x)

function go() {
        console.log( `2:`, x)
        var x = 1
        console.log( `3:`, x)
    }
    
go()
console.log( `4:`, x)
var x = 2
console.log (`5:`, x)

顯示則為:

let、const的暫時性死區

結論: 盡量不要再用var來宣告變數，改用let與const，而且優先使用const，除非需要再指定值才用let。

• “ const ”— 一般使用在識別值(identifier)不會被重新指定值。
• “let”— 一般使用在變數(variable)可能會被重新指定值。
  可參考之前文章JS宣告的var、const、let比較

引用參考資料至:
ES6篇 - let與const
JavaScript: var, let, const 差異