JavaScript 函數聲明與函數表達式深度解析：Hoisting 機制與最佳實踐

JavaScript 建立函數有兩種主要語法：**函數聲明**與**函數表達式**。兩者雖能產出相同功能，但因 **Hoisting（變量提升）** 機制導致行為差異巨大。本文深入剖析提升規則、執行順序、自調用函數表達式（IIFE）與現代最佳實踐，助你避開常見坑洞。

一、語法對比

// 函數聲明
function foo() {}

// 函數表達式（匿名函數賦值給變數）
var bar = function() {};

// 具名函數表達式（利於堆疊追蹤除錯）
var baz = function bazName() {};

// 立即調用函數表達式 (IIFE) - 建立獨立作用域
(function() { var local = 1; })();

二、Hoisting 機制詳解

JavaScript 引擎在執行前會將 **聲明** 提升至作用域頂部：

• 函數聲明： **完整提升**（函數名 + 函數體），可在聲明前呼叫。
• var 變數聲明： **僅提升聲明**，初始化留在原處（賦值為 undefined）。
• let/const： 提升但進入 **暫時性死區 (TDZ)**，聲明前存取拋出 ReferenceError。

執行順序演示

console.log(foo); // [Function: foo] - 函數聲明完整提升
console.log(bar); // undefined - var 提升但未初始化

function foo() {}
var bar = function barName() {};

console.log(foo); // [Function: foo]
console.log(bar); // [Function: barName]

引擎實際執行等效順序：

1. 建立變數 foo、bar，賦值 undefined。
2. 建立函數 foo，賦值給 foo。
3. 執行 console.log(foo) → 印出函數。
4. 執行 console.log(bar) → 印出 undefined。
5. 建立函數 barName，賦值給 bar。
6. 執行後續 console.log。

三、關鍵差異與避坑指南

四、現代最佳實踐建議

1. 優先使用 const + 箭頭函數 / 函數表達式：

const add = (a, b) => a + b;
const factorial = function fact(n) { return n <= 1 ? 1 : n * fact(n - 1); }; // 遞歸需具名

2. 避免在區塊（if/for）中使用函數聲明： 改用函數表達式賦值給 const。
3. IIFE 替代方案： ES6 模組（import/export）天然隔離作用域，無需 IIFE。
4. 回調函數： 使用箭頭函數保留 this 上下文。

五、Function 建構子（不推薦）

var fn = new Function('a', 'b', 'return a + b;'); // 字串解析、效能差、無閉包、安全風險

掌握 Hoisting 與兩種函數定義的語義差異，是寫出可預測、可維護 JavaScript 程式碼的基石。