🔰function expression

an expression that evaluates to a function object.

JS ⟩ value ⟩ function ⟩ expression

an expression that evaluates to a function as value.

//           ╭─── 🔸 function expression ───╮
const area = function (w, h) { return w * h };

🔴 主題

• different forms of F.E.

  • arrow function

  • IIFE

• features of F.E.

  • function name scope

  • function expression not hoisted❗

  • read-only identifier❗

• roles of function expression：

  • as variable ( 👉 more about：function expression as variable)

  • as argument (also called a callback)

  • as method

🧨 雷區

function expression not hoisted.

⭐️ 重點

roles of "function expression"：

• as variable ( 👉 function expression as variable)

• as argument (also called a callback)

• as method

• as IIFE

only function expression can be anonymous function.

( 👉 function name scope)

the name (identifier) of a "function expression" is in its own function name scope, nested between the outer enclosing scope and the inner function scope.

👥 相關

• 👉function*
• ⭐arrow function is a function expression.

💈範例

• replit：function expression

//           ╭─── 🔸 function expression ───╮
const area = function (w, h) { return w * h };    // ⭐️ 1. as "variable"

const math = {                        // ⭐️ 2. as "method"
                                      // 🔸 "named" function expression
    //       ⤷╭──────────────╮ <-------- 🔸 function name: "f" (local)
    factorial: function f(n) {        //     available only in function body.
        // ...
    }
};

//  ╭── 🔸 FE ──╮
  ( function(){ } )();          // ⭐️ 3. as "IIFE" (form 1)

// ╭─── 🔸 FE ──╮
   !function(){ }();            // ⭐️ 3. as "IIFE" (form 2)

//          ╭─── 🔸 FE ────╮
f('click',  function (e) { } ); // ⭐️ 4. as "callback"

📗 參考

• JS.info ⟩ function expressions

📘 手冊

• Function expression
• Function declaration
• different types of functions