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

兩者差異比較

raw-image

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
留言分享你的想法!
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
吸引力法則是互相的,頻率相近的兩方總會尋到彼此。香氛和你也是。
Thumbnail
吸引力法則是互相的,頻率相近的兩方總會尋到彼此。香氛和你也是。
Thumbnail
本文探討臺灣串流平臺的發展現況、競爭格局,並解析其帶來的經濟效應。透過美國電影協會(MPA)的講座內容,結合業界專家意見與生活觀察,文章揭示串流平臺如何影響內容製作, 同時討論臺灣有利的創作環境,包括自由的風氣和開放的政策,對於提升國家軟實力與國際影響力的重要性。
Thumbnail
本文探討臺灣串流平臺的發展現況、競爭格局,並解析其帶來的經濟效應。透過美國電影協會(MPA)的講座內容,結合業界專家意見與生活觀察,文章揭示串流平臺如何影響內容製作, 同時討論臺灣有利的創作環境,包括自由的風氣和開放的政策,對於提升國家軟實力與國際影響力的重要性。
Thumbnail
在 JavaScript 中,函數是物件,因此它們有內建方法可以用來控制執行方式。 這些方法包括 .call()、.apply() 和 .bind(),主要用來改變函數執行時的 this 指向或傳遞參數,特別在物件導向或繼承中很有用。
Thumbnail
在 JavaScript 中,函數是物件,因此它們有內建方法可以用來控制執行方式。 這些方法包括 .call()、.apply() 和 .bind(),主要用來改變函數執行時的 this 指向或傳遞參數,特別在物件導向或繼承中很有用。
Thumbnail
什麼是提升?在 JavaScript 中,提升是指變數和函數宣告會在程式執行前被「提升」到它們所在作用域(scope)的頂部。這是 JavaScript 引擎處理程式碼時的一種行為,讓你在宣告之前就能使用某些變數或函數。
Thumbnail
什麼是提升?在 JavaScript 中,提升是指變數和函數宣告會在程式執行前被「提升」到它們所在作用域(scope)的頂部。這是 JavaScript 引擎處理程式碼時的一種行為,讓你在宣告之前就能使用某些變數或函數。
Thumbnail
這篇文章深入淺出地解釋 JavaScript 中表達式 (expression) 與陳述式 (statement) 的差異,並以 React 中 JSX 的應用為例,說明為何大括號 {} 內只能放入表達式。文章以類比人類語言的句子結構來幫助理解,並提供相關參考資料連結。
Thumbnail
這篇文章深入淺出地解釋 JavaScript 中表達式 (expression) 與陳述式 (statement) 的差異,並以 React 中 JSX 的應用為例,說明為何大括號 {} 內只能放入表達式。文章以類比人類語言的句子結構來幫助理解,並提供相關參考資料連結。
Thumbnail
Spread Syntax和Rest Parameters都使用 ... 符號,Spread Syntax用於展開可迭代物件,例如將陣列或物件的元素複製到新的陣列或物件中,或是在函式呼叫時傳遞參數。Rest Parameters用於收集不定數量的函數參數,將其打包成一個陣列,方便在函數內部進行處理。
Thumbnail
Spread Syntax和Rest Parameters都使用 ... 符號,Spread Syntax用於展開可迭代物件,例如將陣列或物件的元素複製到新的陣列或物件中,或是在函式呼叫時傳遞參數。Rest Parameters用於收集不定數量的函數參數,將其打包成一個陣列,方便在函數內部進行處理。
Thumbnail
箭頭函式是 JavaScript ES6(ECMAScript 2015)引入的一種簡化 Function Expression 語法。 它用來快速定義匿名函式,語法簡潔,特性明確,特別適合用於回呼函式等場景。
Thumbnail
箭頭函式是 JavaScript ES6(ECMAScript 2015)引入的一種簡化 Function Expression 語法。 它用來快速定義匿名函式,語法簡潔,特性明確,特別適合用於回呼函式等場景。
Thumbnail
Function Declaration 與 Function Expression Function Declaration 適合用於需要提升或全域使用的函式。 Function Expression 更靈活,適合用於回呼函式、閉包、高階函式等場景。
Thumbnail
Function Declaration 與 Function Expression Function Declaration 適合用於需要提升或全域使用的函式。 Function Expression 更靈活,適合用於回呼函式、閉包、高階函式等場景。
Thumbnail
函式(Function)是 JavaScript 中用來完成特定任務的可重複執行的程式碼片段。 函式可以接受輸入(參數),進行處理,並回傳結果。 主要的函式建立方式有函式宣告、函式表達式、和箭頭函式。
Thumbnail
函式(Function)是 JavaScript 中用來完成特定任務的可重複執行的程式碼片段。 函式可以接受輸入(參數),進行處理,並回傳結果。 主要的函式建立方式有函式宣告、函式表達式、和箭頭函式。
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
從今天開始往後的的內容會有許多的「註解」,程式不會執行被註解的內容,註解只是方便開發者辨識。JS內的註解主要有兩種。單行註解是在程式碼前方加上//,可以透過快捷鍵cmd(ctrl) + / 完成。多行註解則是用/* 及 */前後包夾要註解的內容。 轉換環境 從上個單元的經驗,有些人可能會發現
Thumbnail
從今天開始往後的的內容會有許多的「註解」,程式不會執行被註解的內容,註解只是方便開發者辨識。JS內的註解主要有兩種。單行註解是在程式碼前方加上//,可以透過快捷鍵cmd(ctrl) + / 完成。多行註解則是用/* 及 */前後包夾要註解的內容。 轉換環境 從上個單元的經驗,有些人可能會發現
Thumbnail
這一篇會介紹非常重要的 JavaScript 函式概念 - 高階函式(Higher-order function),高階函數是將一個或多個函數作為參數,或將一個函數作為結果返回的函數。在本文中,我們將深入探討什麽是高階函數、使用高階函數的好處以及如何在實際應用中使用高階函數,函式導向是什麼?
Thumbnail
這一篇會介紹非常重要的 JavaScript 函式概念 - 高階函式(Higher-order function),高階函數是將一個或多個函數作為參數,或將一個函數作為結果返回的函數。在本文中,我們將深入探討什麽是高階函數、使用高階函數的好處以及如何在實際應用中使用高階函數,函式導向是什麼?
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News