JavaScript 中，函式 (Function) 是一種封裝好、可以重複呼叫的程式區塊。函式用來封裝重複的邏輯、接收參數、回傳輸出、建立自己的作用域(scope)。
在 JS 中，函式可以：
- 被指派給變數
- 當參數傳入
- 當回傳值
函式的種類
JavaScript 的函式的定義方式可分為：- 函式宣告式 (Function declaration)
- 函式表達式(Function expression)
函式宣告式 Function declaration
函式宣告式也被稱為函式陳述式。使用 function 關鍵字宣告有名稱的函式，並且這個函式會被提升，因此也可以在宣告前呼叫。
語法：用 function 關鍵字宣告，function 後方接函式名稱，名稱後的括號內放參數(可選)。
function functionName(parameters){
// content
} // function declaration 是語法層級的宣告，不是表達是，所以結尾不用加 ";"
範例
function sayHey(name){
console.log("Hey " + name);
}
// 使用函式
sayHey("Elaine")
✏️ function declaration 也會提升喔!
函式表達式 Function expression
函式表達式是將函式賦值給一個變數的定義方式。函式表達式又可以再細分成一般的函式表達式、箭頭函式、立即呼叫函式表達式。
- 一般函式表達式範例
const greeting = function sayHello(name){
return `Hello ${name}`
};
console.log(greeting("Elaine")); // Hello Elaine
在上面的範例可以看到，我們將 sayHello 這個函數存到 greeting 這個 const 中，就可以直接使用這個 greeting。
不過，通常在定義函式表達式時，我們也可以省略等號右方函式的名稱，也就是匿名函式的形式：
const greeting = function(name){
return `Hello ${name}`
};
console.log(greeting("Elaine")); // Hello Elaine
函式表達式也只有變數宣告會提升，函式內容不會!
- 箭頭函式 Arrow function
箭頭函式在 ES6 推出，在寫法上比一般的函式表達式更簡潔，另一個重點就是「this 規則不同」，不過我們今天先把重點放在語法上~
- 首先，arrow function 可以省略掉
function關鍵字，並用使用=>：
const greeting = (name) => {
return `Hello ${name}`
};
// 使用函式
console.log(greeting("Elaine"));
- 如果函式只有一個參數，可以省略掉參數外的括號
()：
const greeting = name => {
return `Hello ${name}`
};
// 使用函式
console.log(greeting("Elaine"));
- 如果函式內容只有一行 return，可以省略
return關鍵字與大括號{}：
const greeting = name => `Hello ${name}`;
// 使用函式
console.log(greeting("Elaine"));
- 立即呼叫函式表達式 Immediately Invoked Function Expression
立即呼叫函式有時也被稱作 self-invoking function，這種函式的重點在於「建立後會立刻執行」
(function(name){
console.log(`Hello ${name}`)
})("Elaine");
