JavaScript 函式

前言

JavaScript 中的函式是重要的基礎，理解它們的不同寫法和特性將幫助你更好地組織和撰寫程式碼。

函式陳述式 & 函式表達式差別

函式陳述式

函式陳述式（Function Declaration）在程式碼中會進行提升（Hoisting），這意味著你可以在函式定義之前呼叫它。這使得它們在代碼中更靈活。

console.log(numA(2)); // 4
function numA(x) {
    return x * x;
}

函式表達式

函式表達式（Function Expression）則是將函式賦值給變數，這要求你必須在呼叫函式之前定義它。因此，若不按照順序撰寫，將會導致錯誤。

• 錯誤的範例

console.log(numA(2)); // Identifier 'numA' has already been declared
const numA = function (x) {
    return x * x;
}

• 正確的範例

const numA = function (x) {
    return x * x;
}
console.log(numA(2)); // 4

函式陳述式、函式表達式與箭頭函式的使用方式

下面是不同函式寫法的示範：

// 函式陳述式
function numA(x) {
    return x * x;
}

// 函式表達式
const numB = function (x) {
    return x * x;
}

// 箭頭函式
const numC = (x) => {
    return x * x;
}

// 箭頭函式縮寫 - 沒有參數
const numD = () => '沒有參數';

// 箭頭函式縮寫 - 單一參數
const numE = x => x * x;

// 箭頭函式縮寫 - 多個參數
const numF = (x, y) => x * y;

console.log(numA(2)); // 4
console.log(numB(2)); // 4
console.log(numC(2)); // 4
console.log(numD()); // 沒有參數
console.log(numE(2)); // 4
console.log(numF(2, 3)); // 6

函式的其他特性

1. 作用域（Scope）：

   • 函式可以訪問它所在的作用域及其外部作用域的變數。

2. 回傳值：

   • 每個函式都有一個回傳值，若沒有使用 return，則預設回傳 undefined。

3. 參數預設值：

   • 可以為函式參數設置預設值，這在沒有提供參數時特別有用。

   const greet = (name = '世界') => `你好，${name}!`;
   console.log(greet()); // 你好，世界!
   console.log(greet('小明')); // 你好，小明!

4. 高階函式（Higher-order functions）：

   • 可以將函式作為參數傳遞或返回另一個函式，這使得函式可以非常靈活地操作。

   const applyFunction = (fn, value) => fn(value);
   const double = x => x * 2;
   console.log(applyFunction(double, 5)); // 10