在定義函式時,最常用大概就「陳述式函式、表達式函式、箭頭式函式」這三種,尤其在 ES6 中,用箭頭式函式可以讓語法變得更精簡,也常和 map()、filter()、reduce() 這類的陣列方法搭配使用,以下就來說明一下這三種定義函式的差異和使用的情境!
這次要筆記的就是:
陳述式函式 ( Function Declaration )
表達式函式 ( Function Expression )
箭頭式函式 ( Arrow Function )

快速尋找
1. 陳述式函式 ( Function Declaration )
說明:
使用 function 關鍵字定義的函式。它有一個很特別的特性是「提升( Hosting )」,也就是呼叫陳述式函式時,可以在此函式上方或是下方呼叫都可以,因為陳述式函式在執行時會自動放到最上方去做執行
陳述式函式一定要有函式名稱!
寫法:
function 函式名稱(參數) {
// 執行內容
}
範例:
用 function 關鍵字定義一個函式
→ 只要參數進來就回傳「參數+2」的動作,而在呼叫此函式時,不論是在此函式上方或下方呼叫都可以成功執行

2. 表達式函式 ( Function Expression )
說明:
將函式賦值指定給一個常數或是變數的形式。這邊要注意的是,表達式函式沒有「提升 ( Hosting ) 」的特性,也就不會像陳述式函式在執行時,會自動放到最上面去做執行,所以呼叫表達式函式時,一定要在此函式下方做呼叫,否則程式會導致錯誤
表達式函式的賦值可以是常數或變數,但通常建議用 const 去搭配表達式函式,這樣比較不會因為意外指定了新的值而覆寫掉原本的函式
表達式函式可以不用寫函式名稱!
寫法:
const/let 常數/變數名稱 = function(參數) {
// 執行內容
}
範例:
以賦值一個常數的形式來定義函式
→ 只要參數進來就回傳「參數+2」的動作,而在呼叫此函式時,一定要在此函式下方呼叫才可以成功執行

3. 箭頭式函式 ( Arrow Function )
說明:
是 ES6 引入的一種簡潔的定義函式語法,用 ⇒ 來取代 function 關鍵字。這邊要注意的是,箭頭式函式和表達式函式一樣沒有「提升 ( Hosting ) 」的特性,所以箭頭式函式時,一定要在此函式下方做呼叫,否則程式會導致錯誤
箭頭式函式沒有自己的 this 綁定,會繼承外層的 this
寫法一:
一般寫法
const/let 變數/常數名稱 = (參數) => {
// 執行內容(多行)
return
}
寫法二:
當執行內容只有一行並且有返回值時,可以同時省略 return 和 {}
const/let 變數/常數名稱 = (參數) => // 執行內容(一行)
寫法三:
當參數只有一個、執行內容只有一行並且有返回值時,可以同時省略 () 、 return 和 {}
const/let 變數/常數名稱 = 參數 => // 執行內容(一行)
寫法四:
若沒有參數時,還是要寫 ()
const/let 變數/常數名稱 = () => // 執行內容(一行)
或
const/let 變數/常數名稱 = () => {
// 執行內容(多行)
return
}
範例:
以賦值一個常數的形式來定義函式,只是將 function 關鍵字改成 ⇒
→ 只要參數進來就回傳「參數+2」的動作,而在呼叫此函式時,一定要在此函式下方呼叫才可以成功執行

可以簡寫成

又或是再簡寫成

如果沒有參數,也要寫 ()
