[Note]Function Hoisting

進入函數提升(function Hoisting)介紹之前，先認識Javascript 的提升(Hoisting)概念是什麼。

Hoisting in Javascript

Javascript進入讀取程式碼之前，會先編譯執行的程式碼。

比喻來說，小A平常有蒐集食譜習慣，要去採買備料的前一晚，會先翻一下食譜，才知道明早去菜市場先經過第一家肉攤、第二家菜攤要買什麼。

呼應開頭提及JS Hoisting觀念「先準備在讀取」，而讀取方式會依據JS運行函數和變數兩者不同規則來處理，以上圖為例，可以想像小A先閱讀食譜，在已知菜市場攤販動線去買菜，提前擬定購物計畫，
如同在JS讀程式碼之前，已有既定存取程式碼方式來判斷如何進行Hoisting。

函數Functions

函數表述式(Function Expression)

在變數中賦值函式，調用後成功取值。以下方舉例，函式聲明(Function Declaration)是被var定義。

JavaScript

var meat=function beef(){
 console.log('吃個oec牛肉麵吧');
}
beef():
//Output:吃個oec牛肉麵吧

函數陳述式(Function Statement)

將變數宣告寫入函式聲明中，在外部呼叫函式可以取值。

JavaScript

function beefnoodle(){
	var meat='beef';
	console.log('燒燙燙'+meat);
}
beefnoodle();
//Output:燒燙燙beef

函式陳述式常見於執行指令，不同於函式表述式會是由函數之外的變數帶進函數，在經過計算返值。

接下來，延伸上述例子往下看Hoisting。

函數Hoisting

我們可以透過兩種函式寫法暸解提升(Hoist)概念。

表述式Hoisting

函式表述式是由變數帶進函式賦予值，在呼叫函式取得計算結果，函數的表述式在第四行函數之後才會被執行，

如果呼叫寫在第四行之前，在第一行呼叫會得到undefined結果。

JavaScript

beef():
//Uncaught TypeError: undefined is not a function.

var beef=function (){
 console.log('吃個oec牛肉麵吧');
}
beef();
//Output:吃個oec牛肉麵吧

陳述式Hoisting

不同於表述式(Function Statement)，變數宣告寫在函式中，可以在函式之前被調用，呼應開頭提及這跟JS和瀏覽器提前準備讀取有關，函式調用會被移至函式之前因此可成功取值。

JavaScript

cooking();
function cooking(){
	var beef='牛肉';
	var tomato='番茄';
	console.log('有'+tomato+'的'+beef+'麵真4oec');
}
//Output:有番茄的牛肉麵真4oec


function cooking(){
	var beef='牛肉';
	var tomato='番茄';
	console.log('有'+tomato+'的'+beef+'麵真4oec');
}
cooking();
//Output:有番茄的牛肉麵真4oec

函式陳述式在JS Hoisting會被置頂到作用域，而表述式是由變數來定義函示取結果，需要等跑完表述式後呼叫才會返值，故呼叫應放在函式後方。

偶爾會畫圖來理解程式碼，若內文圖像對你理解有幫助，歡迎自行取用。

此為紀錄學習過程，如內容有誤，歡迎留言指教。

Abby

筆記一下