JS學習筆記#14 | Function Declaration 與 Function Expression

undefined on Tenor

Function Declaration（函式宣告）

定義：

• 使用 function 關鍵字直接宣告函式。
• 必須有函式名稱。
• 可被提升（Hoisting），也就說可以在宣告前呼叫函式。

語法：

function 函式名稱(參數1, 參數2) {
  // 函式內容
  return 參數1 + 參數2;
}

範例：

// 可在宣告之前呼叫
console.log(add(2, 3)); // 輸出：5

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

Function Expression（函式表達式）

定義：

• 將函式作為一個值賦值給變數。
• 不能被提升，必須在宣告後才能使用。
• 可以是匿名函式或具名函式。

語法：

const 函式名稱 = function (參數1, 參數2) {
  // 函式內容
  return 參數1 + 參數2;
};

範例：

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

// 必須在宣告後呼叫
console.log(add(2, 3)); // 輸出：5

兩者差異比較

Function Expression 的主要用途

1. 作為回呼函式（Callback Function）

• • 將函式作為參數傳遞給其他函式。
  • 常用於陣列操作或事件處理。

const numbers = [1, 2, 3, 4];
numbers.forEach(function (num) {
  console.log(num * 2);
});

2. 動態定義函式

根據條件動態分配不同的函式邏輯。

let operation;

if (true) {
  operation = function (a, b) {
    return a + b;
  };
} else {
  operation = function (a, b) {
    return a - b;
  };
}

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

3. 立即執行函式（IIFE, Immediately Invoked Function Expression）

用於執行一次性邏輯，避免污染全域命名空間。

(function () {
  const message = '這是一個立即執行函式';
  console.log(message);
})();
// 輸出：這是一個立即執行函式

4. 用於模組化與閉包（Closure）

使用函式表達式實現閉包，保護變數的作用域。

const counter = (function () {
  let count = 0;
  return function () {
    count += 1;
    return count;
  };
})();

console.log(counter()); // 輸出：1
console.log(counter()); // 輸出：2

5. 作為高階函式的返回值

高階函式返回另一個函式，讓邏輯更具彈性。

function createMultiplier(factor) {
  return function (number) {
    return number * factor;
  };
}

const double = createMultiplier(2);
console.log(double(5)); // 輸出：10

6. 延遲執行的函式

將函式表達式賦值給變數，並根據條件執行。

const logMessage = function () {
  console.log('這是一個延遲執行的函式');
};

setTimeout(logMessage, 1000); // 1秒後執行