JavaScript - Function Expressions: A Beginner's Guide

你好，未來的 JavaScript 巫師們！我很興奮能成為你們在 Function Expressions 世界的精彩之旅的導遊。作為一個教了多年編程的人，我可以告訴你們，理解函數就像學習騎自行車一樣 - 一旦你掌握了它，你就永遠不會忘記，它會帶你去你想像不到的地方！

JavaScript - Function Expressions

What Are Function Expressions?

在我們深入細節之前，讓我們從一個簡單的比喻開始。如果規範的函數就像是現成的餐點，那麼函數表達式就像是你自己烹飪的菜餚。你可以更多地控制食材（參數）和配方（函數體）。

函數表達式簡單來說就是定義函數作為表達式的一部分的方法。這就像是在說，「嘿，JavaScript，我有一個很棒的小代碼包，我想把它存儲在一個變量中或者傳來傳去。」

語法

讓我們看看函數表達式的基本語法：

let myFunction = function(parameters) {
// 函數體
return result;
};

在這裡，我們創建了一個名為 myFunction 的變量並將它賦予一個匿名函數。這就像給一個之前沒有名字的人一個名稱標籤！

Examples of Function Expressions

Example 1: A Simple Greeting

讓我們從一個友好的「Hello, World!」函數開始：

let greet = function() {
console.log("Hello, World!");
};

greet(); // 輸出：Hello, World!

在這個例子中，我們創建了一個不接收任何參數的函數表達式 greet。當我們調用 greet() 時，它會將我們開心的信息記錄到控制台。這就像教一隻鸚鵡說一句話 - 一旦你教會了它，你就可以隨時讓它說話！

Example 2: Adding Two Numbers

現在，讓我們創建一個可以將兩個數字相加的函數：

let add = function(a, b) {
return a + b;
};

console.log(add(5, 3)); // 輸出：8

在這裡，我們的 add 函數接收兩個參數，a 和 b，並返回它們的和。這就像在變量中存儲一個微型計算器！

Example 3: Function Expression with Arrow Function

JavaScript 還允許我們使用一種更短的語法來寫函數表達式，這種語法叫做箭頭函數。這就像發短信時寫「u」而不是「you」 - 更短，但意思相同：

let multiply = (a, b) => a * b;

console.log(multiply(4, 6)); // 輸出：24

這個箭頭函數 multiply 接收兩個參數並返回它們的乘積。注意我們不需要寫 return - 对于簡單的單行函數，返回是隐含的。

When to Use Function Expressions

函數表達式非常通用。它們在以下情況下特別有用：

作為回調函數
當你需要條件性地創建函數時
當你想將函數作為參數傳遞給另一個函數時

Example 4: Function Expression as a Callback

回調是 JavaScript 的基本概念。這裡有一個使用 setTimeout 的例子：

setTimeout(function() {
console.log("This message appears after 3 seconds");
}, 3000);

在這個例子中，我們將一個匿名函數表達式作為回調傳遞給 setTimeout。這就像告訴 JavaScript，「嘿，3秒後再運行這段代碼。」

Example 5: Conditional Function Creation

有時候，你可能想根據某些條件創建不同的函數：

let isEven = function(num) {
return num % 2 === 0;
};

let checkNumber = isEven(4) ?
function() { console.log("It's even!"); } :
function() { console.log("It's odd!"); };

checkNumber(); // 輸出：It's even!

在這裡，我們使用三元運算符根據 isEven 的輸入是偶數還是奇數來為 checkNumber 分配不同的函數表達式。

Function Expression Methods

函數表達式還可以用於為對象創建方法。讓我們看一個有趣的例子：

let pet = {
name: "Fluffy",
type: "cat",
speak: function() {
console.log(this.name + " says: Meow!");
}
};

pet.speak(); // 輸出：Fluffy says: Meow!

在這個例子中，speak 是使用函數表達式定義的方法。這就像教 Fluffy 如何按命令喵喵叫！

Comparison of Function Methods

讓我們總結一下 JavaScript 中定義函數的不同方法：

方法	語法	提升作用	使用場景
函數聲明	`function name() {}`	提升作用	通常使用，當你需要在使用函數之前定義它時
函數表達式	`let name = function() {}`	無提升作用	當你需要將函數賦值給變量或作為參數傳遞時
箭頭函數	`let name = () => {}`	無提升作用	短的、簡單的函數，特別是作為回調

記住，這些方法各有其適用的地方，掌握它們將使你成為一名真正的 JavaScript 高手！

總結來說，函數表達式是你 JavaScript 工具包中的一個強大工具。它提供了靈活性並能夠導致更乾淨、更模塊化的代碼。隨著你 JavaScript 旅程的繼續，你會發現自己越來越多地使用函數表達式。持續練習，保持好奇心，在你意識到之前，你將會流利地在 JavaScript 語言中表達自己！

Credits: Image by storyset