modern-javascript-patterns

wshobson ｜ 架構與重構 ｜ 原文 ｜ MIT

用 ES6+ 與函式程式設計模式寫出乾淨的現代 JavaScript

---
name: modern-javascript-patterns
description: 精通 ES6+ 功能，包含 async/await、解構、spread 運算子、箭頭函式、promise、module、iterator、generator 與函式程式設計模式，寫出乾淨、有效率的 JavaScript。在重構舊程式碼、實作現代寫法或最佳化 JavaScript 應用時使用。
---

# Modern JavaScript Patterns

精通現代 JavaScript（ES6+）功能、函式程式設計模式與最佳實務的完整指南，用來寫出乾淨、好維護又有效能的程式碼。

## When to Use This Skill

- 把舊的 JavaScript 重構成現代語法
- 實作函式程式設計模式
- 最佳化 JavaScript 效能
- 撰寫好維護、好閱讀的程式碼
- 處理非同步操作
- 建構現代 web 應用
- 從 callback 遷移到 Promise/async-await
- 實作資料轉換 pipeline

## Detailed patterns and worked examples

詳細的模式文件放在 `references/details.md`。上面的導覽層不夠用時，再去讀那個檔案。

## Best Practices

1. **預設用 const**：只有需要重新賦值時才用 let
2. **優先用箭頭函式**：尤其是 callback
3. **使用 template literal**：取代字串串接
4. **解構物件和陣列**：讓程式碼更乾淨
5. **使用 async/await**：取代 Promise 鏈
6. **避免修改資料**：用 spread 運算子和陣列方法
7. **使用 optional chaining**：避免「Cannot read property of undefined」
8. **使用 nullish coalescing**：處理預設值
9. **優先用陣列方法**：取代傳統迴圈
10. **使用 module**：讓程式碼組織更好
11. **寫 pure function**：更好測試、更好推理
12. **使用有意義的變數名稱**：程式碼本身就是文件
13. **讓函式保持小**：單一職責原則
14. **正確處理錯誤**：搭配 async/await 使用 try/catch
15. **使用 strict mode**：`'use strict'` 能更早抓到錯誤

常見的陷阱（this 綁定、promise 反模式、記憶體洩漏）請見 [references/advanced-patterns.md](references/advanced-patterns.md)。

---
name: modern-javascript-patterns
description: Master ES6+ features including async/await, destructuring, spread operators, arrow functions, promises, modules, iterators, generators, and functional programming patterns for writing clean, efficient JavaScript code. Use when refactoring legacy code, implementing modern patterns, or optimizing JavaScript applications.
---

# Modern JavaScript Patterns

Comprehensive guide for mastering modern JavaScript (ES6+) features, functional programming patterns, and best practices for writing clean, maintainable, and performant code.

## When to Use This Skill

- Refactoring legacy JavaScript to modern syntax
- Implementing functional programming patterns
- Optimizing JavaScript performance
- Writing maintainable and readable code
- Working with asynchronous operations
- Building modern web applications
- Migrating from callbacks to Promises/async-await
- Implementing data transformation pipelines

## Detailed patterns and worked examples

Detailed pattern documentation lives in `references/details.md`. Read that file when the navigation tier above is insufficient.

## Best Practices

1. **Use const by default**: Only use let when reassignment is needed
2. **Prefer arrow functions**: Especially for callbacks
3. **Use template literals**: Instead of string concatenation
4. **Destructure objects and arrays**: For cleaner code
5. **Use async/await**: Instead of Promise chains
6. **Avoid mutating data**: Use spread operator and array methods
7. **Use optional chaining**: Prevent "Cannot read property of undefined"
8. **Use nullish coalescing**: For default values
9. **Prefer array methods**: Over traditional loops
10. **Use modules**: For better code organization
11. **Write pure functions**: Easier to test and reason about
12. **Use meaningful variable names**: Self-documenting code
13. **Keep functions small**: Single responsibility principle
14. **Handle errors properly**: Use try/catch with async/await
15. **Use strict mode**: `'use strict'` for better error catching

For common pitfalls (this binding, promise anti-patterns, memory leaks), see [references/advanced-patterns.md](references/advanced-patterns.md).