---
id: gh-modern-javascript-patterns
name: "modern-javascript-patterns"
url: https://skills.yangsir.net/skill/gh-modern-javascript-patterns
author: wshobson
domain: ai-code-generation-quality
tags: ["javascript", "es6", "functional-programming", "code-quality", "refactoring"]
install_count: 15900
rating: 4.60 (120 reviews)
github: https://github.com/wshobson/agents/tree/main/plugins/javascript-typescript/skills/modern-javascript-patterns
---

# modern-javascript-patterns

> 该技能旨在帮助开发者掌握 ES6+ 现代 JavaScript 特性及函数式编程模式，包括 async/await、解构、Promise 等，以编写更清晰、高效、可维护的代码。适用于重构旧代码、优化性能或实施现代开发实践，提升代码质量和开发效率。

**Stats**: 15,900 installs · 4.6/5 (120 reviews)

## Before / After 对比

### 提升代码审查效率

**Before**:

审查包含旧语法和复杂逻辑的 JavaScript 代码时，团队成员需要花费大量时间理解代码意图，耗时且容易遗漏潜在问题，导致开发周期延长。

**After**:

采用现代 JavaScript 模式后，代码结构清晰、逻辑易懂，团队成员能更快地理解和审查代码，显著缩短审查时间，提高开发效率和代码质量。

| Metric | Before | After | Change |
|---|---|---|---|
| 代码审查时长 | 60分钟 | 20分钟 | -66% |

## Readme

# 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).


---
*Source: https://skills.yangsir.net/skill/gh-modern-javascript-patterns*
*Markdown mirror: https://skills.yangsir.net/api/skill/gh-modern-javascript-patterns/markdown*