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

更新 發佈閱讀 5 分鐘


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

兩者差異比較

vocus|新世代的創作平台

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秒後執行
留言
avatar-img
koko的沙龍
1會員
34內容數
koko的沙龍的其他內容
2025/04/30
React 事件處理:讓網頁動起來~ 網頁的互動性是吸引使用者、提供良好體驗的關鍵。 在 React 中,透過監聽使用者的操作(例如點擊、滑鼠移動、鍵盤輸入),並執行相應的程式碼,來實現豐富的互動效果。
Thumbnail
2025/04/30
React 事件處理:讓網頁動起來~ 網頁的互動性是吸引使用者、提供良好體驗的關鍵。 在 React 中,透過監聽使用者的操作(例如點擊、滑鼠移動、鍵盤輸入),並執行相應的程式碼,來實現豐富的互動效果。
Thumbnail
2025/04/28
在 React 的世界裡,Props 負責從父元件向子元件傳遞資料,而 State 則是負責管理元件自身的內部資料。 State 就像元件的記憶,可以儲存元件的狀態,並根據狀態的變化來更新 UI。
Thumbnail
2025/04/28
在 React 的世界裡,Props 負責從父元件向子元件傳遞資料,而 State 則是負責管理元件自身的內部資料。 State 就像元件的記憶,可以儲存元件的狀態,並根據狀態的變化來更新 UI。
Thumbnail
2025/04/27
在 React 的世界裡,元件 (Component) 就像一個個獨立的個體,各自負責 UI 的一部分,要讓這些個體協同工作,就需要一種溝通的機制,而 Props 就是組件之間通信和數據傳遞的主要方式。
Thumbnail
2025/04/27
在 React 的世界裡,元件 (Component) 就像一個個獨立的個體,各自負責 UI 的一部分,要讓這些個體協同工作,就需要一種溝通的機制,而 Props 就是組件之間通信和數據傳遞的主要方式。
Thumbnail
看更多
你可能也想看
Thumbnail
函式(Function)是 JavaScript 中用來完成特定任務的可重複執行的程式碼片段。 函式可以接受輸入(參數),進行處理,並回傳結果。 主要的函式建立方式有函式宣告、函式表達式、和箭頭函式。
Thumbnail
函式(Function)是 JavaScript 中用來完成特定任務的可重複執行的程式碼片段。 函式可以接受輸入(參數),進行處理,並回傳結果。 主要的函式建立方式有函式宣告、函式表達式、和箭頭函式。
Thumbnail
Spread Syntax和Rest Parameters都使用 ... 符號,Spread Syntax用於展開可迭代物件,例如將陣列或物件的元素複製到新的陣列或物件中,或是在函式呼叫時傳遞參數。Rest Parameters用於收集不定數量的函數參數,將其打包成一個陣列,方便在函數內部進行處理。
Thumbnail
Spread Syntax和Rest Parameters都使用 ... 符號,Spread Syntax用於展開可迭代物件,例如將陣列或物件的元素複製到新的陣列或物件中,或是在函式呼叫時傳遞參數。Rest Parameters用於收集不定數量的函數參數,將其打包成一個陣列,方便在函數內部進行處理。
Thumbnail
在 JavaScript 中,函數是物件,因此它們有內建方法可以用來控制執行方式。 這些方法包括 .call()、.apply() 和 .bind(),主要用來改變函數執行時的 this 指向或傳遞參數,特別在物件導向或繼承中很有用。
Thumbnail
在 JavaScript 中,函數是物件,因此它們有內建方法可以用來控制執行方式。 這些方法包括 .call()、.apply() 和 .bind(),主要用來改變函數執行時的 this 指向或傳遞參數,特別在物件導向或繼承中很有用。
Thumbnail
箭頭函式是 JavaScript ES6(ECMAScript 2015)引入的一種簡化 Function Expression 語法。 它用來快速定義匿名函式,語法簡潔,特性明確,特別適合用於回呼函式等場景。
Thumbnail
箭頭函式是 JavaScript ES6(ECMAScript 2015)引入的一種簡化 Function Expression 語法。 它用來快速定義匿名函式,語法簡潔,特性明確,特別適合用於回呼函式等場景。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
什麼是提升?在 JavaScript 中,提升是指變數和函數宣告會在程式執行前被「提升」到它們所在作用域(scope)的頂部。這是 JavaScript 引擎處理程式碼時的一種行為,讓你在宣告之前就能使用某些變數或函數。
Thumbnail
什麼是提升?在 JavaScript 中,提升是指變數和函數宣告會在程式執行前被「提升」到它們所在作用域(scope)的頂部。這是 JavaScript 引擎處理程式碼時的一種行為,讓你在宣告之前就能使用某些變數或函數。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
Function Declaration 與 Function Expression Function Declaration 適合用於需要提升或全域使用的函式。 Function Expression 更靈活,適合用於回呼函式、閉包、高階函式等場景。
Thumbnail
Function Declaration 與 Function Expression Function Declaration 適合用於需要提升或全域使用的函式。 Function Expression 更靈活,適合用於回呼函式、閉包、高階函式等場景。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
Higher-Order Function(高階方程式) 是什麼 Higher-Order Function簡稱HOF,是指一個以function作為參數的function或者回傳function的function,我知道目前聽起來非常抽象,我們舉一個我們之前就已經看過的例子。 以Funct
Thumbnail
Higher-Order Function(高階方程式) 是什麼 Higher-Order Function簡稱HOF,是指一個以function作為參數的function或者回傳function的function,我知道目前聽起來非常抽象,我們舉一個我們之前就已經看過的例子。 以Funct
Thumbnail
這篇文章深入淺出地解釋 JavaScript 中表達式 (expression) 與陳述式 (statement) 的差異,並以 React 中 JSX 的應用為例,說明為何大括號 {} 內只能放入表達式。文章以類比人類語言的句子結構來幫助理解,並提供相關參考資料連結。
Thumbnail
這篇文章深入淺出地解釋 JavaScript 中表達式 (expression) 與陳述式 (statement) 的差異,並以 React 中 JSX 的應用為例,說明為何大括號 {} 內只能放入表達式。文章以類比人類語言的句子結構來幫助理解,並提供相關參考資料連結。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News