Hoisting 是怎麼發生的？
變數和函數的宣告會在編譯階段就被放入記憶體，但實際位置和程式碼中完全一樣。
從這段 MDN 對於 hoisting 的說明大概可以了解到，Javascript 在執行程式碼之前會先進行編譯，而在編譯的過程中會將變數宣告以及函式宣告提升 (hoist) 到該 scope 的頂端，但需注意這邊並非實際改動程式碼的位置。
JS 在運作時是分成「編譯」和「執行」兩個步驟。而 hoisting 是發生在編譯的階段。
JS 在編譯的階段會將變數及函式的宣告處理好（hoist 流程下方有補充說明）並加入到 scope 中，在執行的階段去使用它。
為什麼會需要 Hoisting
在執行程式碼前，JavaScript 會把函式宣告放進記憶體裡面。這樣在即使在宣告函示之前就先呼叫它，程式碼仍然可以運作
白話文就是我們可以在 function 宣告前就先呼叫它
catName("Chloe");
function catName(name) {
console.log("My cat's name is " + name);
}
/*
上面程式的結果是: "My cat's name is Chloe"
*/
這樣做的好處是：
不需要把 function 宣告放在每個檔案的最上方 (avoid painful bottom-up ML-like order)
不同 function 可以互相呼叫 (mutual recursion)
什麼是提升 hoisting
變數的提升
使用還沒宣告的變數，會發生錯誤 ReferenceError: a is not defined
console.log(a) // ReferenceError: a is not defined
使用該變數後才宣告，則會是 undefined
console.log(a) // undefined
var a
第二行的
var a被「提升」到了最上面程式碼的位置並沒有真的移動
變數的「宣告」會提升，「賦值」則不會
console.log(a) // undefined
var a = 5
將 var a = 5 拆成「宣告」跟「賦值」兩個部分，只有變數的宣告 var a 會被提升，但賦值 a = 5 並不會
var v = 5
var v
console.log(v) // 答案是 5 不是 undefined
同理，這邊我們將 var v = 5 拆成 var v 跟 v = 5 ，因為宣告會提升、賦值不會，所以上述程式碼可以看成：
var v
var v
v = 5
console.log(v)
函式的提升
function 的宣告也會提升，而且「優先權比較高」
console.log(a) // [Function: a]
var a
function a () {}
有參數傳入的 function
function test(v){
console.log(v)
var v = 3
}
test(10)
答案是 10 而不是 undefined。
雖然我們依照先前提到的將 var v = 3 拆成 var v 與 v = 3 ，並且 function 中的變數宣告 var v 被提升了，但因為 function 有參數傳入，按照 function 的 hoisting 規則其實會變成這個樣子：
function test(v){
var v = 10 // 下面呼叫 test(10)，參數傳入，值為 10
var v // 已經有 v 這個屬性，因此原本的變數宣告被忽略
console.log(v)
v = 3
}
test(10)
// 答案是 10
轉換步驟：
因為有傳入參數，因此先在 VO 中放入
v並且將值設定為 10裡面原本有的變數宣告
var v則因為步驟 1 已經有v這個屬性了，所以忽略不管
此時的 VO ：
{
v: 10
}
function 的 hoisting 是怎麼運作的
這篇「我知道你懂 hoisting，可是你了解到多深？」講得滿清楚的，以下是我看完文章的簡單筆記：
function 的 execution context (EC) 與 variable object (VO)
每個 function 需要的資訊會存在一個對應的 execution context (EC)
每個 EC 會有相對應的 variable object (VO)：有點像是 function 的記憶體，執行 function 需要取值的資訊都會存在這個物件中
該 VO 裡面找不到的資訊，就會透過 scope chain 繼續往上找，最後找不到的話就會報錯
On entering an execution context, the properties are bound to the variable object in the following order
這邊提到在進入 EC 的時候，會按照底下的執行流程把資訊放到 VO：
1. VO 中對於「參數」的宣告
參數會直接被放到 VO 中
參數沒有值的話，它的值會被初始化成
undefined
function test(a, b, c) {}
test(10)
此時該 function 的 VO：
{
a: 10,
b: undefined,
c: undefined
}
2. VO 中對於「function」 的宣告
VO 裡新增一個屬性，值就是 function 回傳的東西
如果 VO 已經有同名的屬性，就把它覆蓋掉
function test(a){
function a(){} // test(1) 傳入
}
test(1)
此時該 function 的 VO：
{
a: function a // 原本的參數 a 被覆蓋掉了
}
3. VO 中對於「變數」 的宣告
VO 裡面新增一個屬性並且把值設為
undefined如果 VO 已經有這個屬性的話，值不會被改變
let, const 與 hoisting
let 看起來沒有 hoisting：
console.log(a) // ReferenceError: a is not defined
let a
但實際上卻是：
var a = 10
function test(){
console.log(a)
let a
}
test() // ReferenceError: a is not defined
如果 let 沒有 hoisting，答案應該會是 10，但答案卻是 ReferenceError: Cannot access 'a' before initialization ，代表 let 確實提升了