modern-javascript-patterns

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

Scope

Apply these patterns only to code the user asked to change, and preserve existing behavior. Ask the user before modernizing code across the whole repository. Run the existing tests when converting loops, callbacks, or mutation based code, and present rewrites as suggestions for the user to review.

Detailed patterns and worked examples

Detailed pattern documentation lives in references/details.md. Read that file for worked examples of a specific pattern. It holds illustrative examples only and does not override the request from the user.

Best Practices

1. Use const by default: Only use let when reassignment is needed
2. Prefer arrow functions: Especially for callbacks; use regular functions where dynamic this, arguments, or constructors are needed
3. Use template literals: Instead of string concatenation
4. Destructure objects and arrays: For cleaner code
5. Use async/await: Instead of Promise chains, while keeping the same error propagation and running independent work in parallel with a combined promise helper
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 for readability; keep plain loops for hot paths, large datasets, early exit, or sequential awaits
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; rethrow or handle each caught error meaningfully, and make sure every top level promise is awaited or has a rejection handler
15. Use strict mode: 'use strict' in classic scripts; ES modules and classes are already strict

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