[ js 筆記 ] 什麼是 hoisting？

我們在 ECMAScript® 2015 Language Specification 找不到提升（Hoisting）這個術語。那 hoisting 是什麼意思呢？我們都知道 Javascript 是「單執行續 (Single-Thread)」的語言，會一行一行解析事件，一次只做一件事情。而 hoisting 看起來是將變數和函式宣告，移動到程式的區塊頂端，這樣聽起來不是很矛盾嗎？實際上 Javascript 的運作過程中，變數和函數的宣告會在編譯階段就被放入記憶體，但實際位置和程式碼中完全一樣。

var 使用

console.log(a)
a = 1
var a

我在最後一行才宣告變數 a ，印出 undefined 而不是 ReferenceError: a is not defined 就是 hoisting 的作用效果。

var a
console.log(a)
a = 1

與這樣寫的結果是一樣的。

用在函式也同樣可以在程式碼宣告該函式之前使用它。

name("Chloe")

function name(name) {
  console.log("My name is " + name);
}

// 印出："My name is Chloe"

const 與 let 使用

在 ES6 有兩個新的宣告變數關鍵字：const 與 let。const 與 let 同樣有 hoisting 的效果，最主要的差別是 const 與 let 要先進行宣告，否則會出現錯誤。

console.log(a)
a = 1
let a

結果會跟你說ReferenceError: Cannot access 'a' before initialization，而不是ReferenceError: a is not defined。他跟你說：我在運行的過程中有找到 a ，但是請在使用前先宣告 a 。這樣的好處是什麼？先宣告再使用，讓程式碼看起來更明瞭！

更詳細的 hoisting 可以參考 huli 大大的 我知道你懂 hoisting，可是你了解到多深？