# Modern Javascript Patterns

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

- Skill: `majiayu000/modern-javascript-patterns` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/modern-javascript-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/modern-javascript-patterns/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/modern-javascript-patterns

---


# Modern JavaScript Patterns

Master ES6+ features and functional programming for clean, efficient code.

## Arrow Functions

```javascript
// Basic syntax
const add = (a, b) => a + b;
const double = x => x * 2;
const getRandom = () => Math.random();

// Multi-line (need braces)
const processUser = user => {
  const normalized = user.name.toLowerCase();
  return { ...user, name: normalized };
};

// Returning objects (wrap in parentheses)
const createUser = (name, age) => ({ name, age });

// Lexical 'this' binding
class Counter {
  increment = () => { this.count++; };  // 'this' preserved
}
```

## Destructuring

```javascript
// Object destructuring
const { name, email } = user;
const { name: userName } = user;           // Rename
const { age = 25 } = user;                 // Default value
const { address: { city } } = user;        // Nested
const { id, ...userData } = user;          // Rest

// Array destructuring
const [first, second] = numbers;
const [, , third] = numbers;               // Skip elements
const [head, ...tail] = numbers;           // Rest
let [a, b] = [1, 2]; [a, b] = [b, a];     // Swap

// Function parameters
function greet({ name, age = 18 }) {
  console.log(`Hello ${name}`);
}
```

## Spread & Rest

```javascript
// Spread arrays
const combined = [...arr1, ...arr2];
const copy = [...arr1];

// Spread objects
const settings = { ...defaults, ...userPrefs };
const newObj = { ...user, age: 31 };

// Rest parameters
function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}
```

## Async/Await

```javascript
// Basic usage
async function fetchUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    return await response.json();
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

// Parallel execution
const [user1, user2] = await Promise.all([
  fetchUser(1),
  fetchUser(2)
]);

// Promise combinators
Promise.all(promises);        // Wait for all
Promise.allSettled(promises); // All results, regardless of outcome
Promise.race(promises);       // First to complete
Promise.any(promises);        // First to succeed
```

## Functional Patterns

### Array Methods

```javascript
const users = [{ id: 1, name: 'John', active: true }, ...];

// Map - Transform
const names = users.map(u => u.name);

// Filter - Select
const activeUsers = users.filter(u => u.active);

// Reduce - Aggregate
const totalAge = users.reduce((sum, u) => sum + u.age, 0);

// Chaining
const result = users
  .filter(u => u.active)
  .map(u => u.name)
  .sort()
  .join(', ');

// Other useful methods
users.find(u => u.id === 2);           // First match
users.findIndex(u => u.name === 'Jane'); // Index of first match
users.some(u => u.active);              // At least one matches
users.every(u => u.age >= 18);          // All match
userTags.flatMap(u => u.tags);          // Map and flatten
```

### Higher-Order Functions

```javascript
// Currying
const multiply = a => b => a * b;
const double = multiply(2);

// Memoization
function memoize(fn) {
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args);
    if (!cache.has(key)) cache.set(key, fn(...args));
    return cache.get(key);
  };
}

// Composition
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);
```

### Immutability

```javascript
// Arrays
const withNew = [...arr, newItem];           // Add
const without = arr.filter(x => x !== item); // Remove
const updated = arr.map(x => x.id === id ? { ...x, name } : x);

// Objects
const updated = { ...user, age: 31 };        // Update
const { password, ...safe } = user;          // Remove key
```

## Modern Operators

```javascript
// Optional chaining
const city = user?.address?.city;
const result = obj.method?.();
const first = arr?.[0];

// Nullish coalescing
const value = null ?? 'default';    // 'default'
const value = 0 ?? 'default';       // 0 (not 'default')

// Logical assignment
a ??= 'default';  // a = a ?? 'default'
a ||= 'default';  // a = a || 'default'
a &&= value;      // a = a && value
```

## Modules

```javascript
// Named exports
export const PI = 3.14159;
export function add(a, b) { return a + b; }

// Default export
export default function multiply(a, b) { return a * b; }

// Importing
import multiply, { PI, add } from './math.js';
import * as Math from './math.js';

// Dynamic import
const module = await import('./feature.js');
```

## Performance Patterns

```javascript
// Debounce
function debounce(fn, delay) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => fn(...args), delay);
  };
}

// Throttle
function throttle(fn, limit) {
  let inThrottle;
  return (...args) => {
    if (!inThrottle) {
      fn(...args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}
```

## Best Practices

1. **Use const by default** - Only let when reassignment needed
2. **Prefer arrow functions** - Especially for callbacks
3. **Use template literals** - Instead of concatenation
4. **Destructure** - For cleaner code
5. **Use async/await** - Instead of Promise chains
6. **Avoid mutation** - Use spread operator
7. **Use optional chaining** - Prevent undefined errors
8. **Use nullish coalescing** - For defaults
9. **Prefer array methods** - Over loops
10. **Write pure functions** - Easier to test

## Detailed References

For comprehensive patterns, see:
- [references/generators-iterators.md](references/generators-iterators.md)
- [references/class-features.md](references/class-features.md)

## Resources

- **MDN Web Docs**: https://developer.mozilla.org/en-US/docs/Web/JavaScript
- **JavaScript.info**: https://javascript.info/