# Day 45：測試框架與 JavaScript 函式進階

By [雞蛋糕的前端修煉屋](https://paragraph.com/@gcake) · 2026-01-23

---

今日閱讀進度
------

*   《單元測試的藝術》3/e 第二章 ~ 2.4 (p. 46)
    
*   《JavaScript 概念三明治》第四章完、第五章 p.5-23
    

測試框架核心概念
--------

### 測試框架的四大角色

測試框架不只是幫你跑測試,它整合了四個關鍵元件: [developer.mozilla](https://developer.mozilla.org/zh-TW/docs/MDN/Writing_guidelines/Writing_style_guide)

1.  **測試程式庫**:提供組織測試的結構 (如 `describe`、`it`)
    
2.  **斷言庫**:用 `expect` 驗證預期結果
    
3.  **測試執行器**:自動化執行所有測試
    
4.  **結果報告器**:視覺化呈現測試通過/失敗狀態
    

Jest 與 Vitest 還額外提供**隔離設施**,確保每個測試獨立運行,不互相干擾 [ibraheem](https://ibraheem.com/articles/markdown-blogging-best-practices)

### 為什麼要用測試框架?

使用測試框架帶來的四大優勢: [developer.mozilla](https://developer.mozilla.org/zh-TW/docs/MDN/Writing_guidelines/Writing_style_guide)

*   **結構明確**:程式碼組織清楚,可讀性高
    
*   **快速迭代**:複製測試結構,新測試寫得更快
    
*   **建立信心**:節省手動驗證時間,更敢重構
    
*   **共同語言**:團隊對測試報告有一致理解
    

### 易錯提醒

⚠ **使用測試框架 ≠ 寫出好測試**

測試框架只是工具,它不保證:

*   測試程式本身易讀、易維護
    
*   測試涵蓋所有想驗證的邏輯
    
*   測試具有可信度
    

**關鍵在於如何設計測試**,而非只會使用框架語法 [ibraheem](https://ibraheem.com/articles/markdown-blogging-best-practices)

### 實作狀態

✅ 已完成:fork kata repo,移除 Jest 改用 Vitest 環境設定  
⏳ 待完成:實作測試練習題

* * *

JavaScript 型別系統
---------------

### 原始型別 vs 物件型別

**判斷原則**:除了原始型別,其他都是物件型別 [developer.mozilla](https://developer.mozilla.org/zh-TW/docs/MDN/Writing_guidelines)

**原始型別(Primitive Types)共 6 種**:

*   `null` / `undefined`
    
*   `number` / `string` / `boolean`
    
*   `symbol` (較少用,透過 `Symbol()` 產生)
    

**物件型別**:陣列、物件、函式等

**特別注意**:函式是「可被呼叫的物件」,既可以當函式執行,也能當物件使用 [developer.mozilla](https://developer.mozilla.org/zh-TW/docs/MDN/Writing_guidelines)

* * *

函式的進階概念
-------

### 陳述式 vs 表達式

*   **陳述式(Statement)**:一段描述邏輯的程式碼
    
*   **表達式(Expression)**:能被 JavaScript 運算並產生數值的程式碼
    

### 兩種函式寫法

    // 函式陳述式 - 宣告函式
    function greet(name) {
      return `Hello, ${name}`;
    }
    
    // 函式表達式 - 把函式指派給變數
    const greet = function(name) {
      return `Hello, ${name}`;
    };
    

### 函式作為物件的特性

函式具有 `name` 屬性,可以查看函式名稱: [developer.mozilla](https://developer.mozilla.org/zh-TW/docs/MDN/Writing_guidelines)

    function calculateTotal() {
      // 計算邏輯
    }
    
    console.log(calculateTotal.name); // "calculateTotal"
    

**函式的三種用途**:

1.  當作參數傳進另一個函式 (高階函式 HOF)
    
2.  模擬物件導向的「類別」寫法
    
3.  利用 IIFE 建立獨立作用域
    

### 立即執行函式(IIFE)使用情境

IIFE 的設計目的: [developer.mozilla](https://developer.mozilla.org/zh-TW/docs/MDN/Writing_guidelines/Writing_style_guide)

*   讓程式碼在全域環境載入後立即執行
    
*   利用函式作用域限制變數存取
    
*   達到與全域環境隔離的效果
    

    (function() {
      const privateVar = '不會污染全域';
      console.log('立即執行');
    })();
    

* * *

下一步學習規劃
-------

*   \[ \] 完成 kata 測試練習實作
    
*   \[ \] 繼續閱讀《JavaScript 概念三明治》箭頭函式章節
    
*   \[ \] 練習撰寫測試,驗證函式概念理解
    

* * *

**學習工具**: Vitest + Airbnb JavaScript Style Guide  
**參考文獻**: 《單元測試的藝術》3/e、《JavaScript 概念三明治》

---

*Originally published on [雞蛋糕的前端修煉屋](https://paragraph.com/@gcake/day-45)*