Modern JavaScript Design Patterns: ES2024+ Features in Production

After years of building production JavaScript applications—from real-time dashboards processing millions of events to complex SPAs serving many companies—I've learned that design patterns aren't just academic exercises. They're battle-tested solutions to recurring problems that, when applied correctly, make code more maintainable, testable, and performant.

In this guide, I'll share practical JavaScript design patterns using modern ES2024+ features. Think of patterns as recipes—you don't need to memorize them all, but knowing when to use each one can save you hours of debugging and refactoring.

1. Creational Patterns: Building Objects the Smart Way

Creational patterns help you create objects in a controlled and flexible manner. Think of them as blueprints for constructing things in your application.

Factory Pattern: Creating Objects with Different Configurations

When to use: You need to create different types of similar objects based on certain conditions (like user roles, settings, or environments).

Real-world example: Imagine an app where admins, guests, and premium users have different permissions. Instead of writing if-else statements everywhere, use a factory:

// Simple factory example
class UserServiceFactory {
  create(userType) {
    const configs = {
      admin: { permissions: ['read', 'write', 'delete'] },
      guest: { permissions: ['read'] },
      premium: { permissions: ['read', 'write'], features: ['export', 'analytics'] }
    };

    const config = configs[userType];
    if (!config) throw new Error(`Unknown user type: ${userType}`);

    return new UserService(config);
  }
}

// Usage - Clean and simple!
const factory = new UserServiceFactory();
const adminService = factory.create('admin');
const guestService = factory.create('guest');

Key benefits: Centralized object creation logic, easy testing (mock the factory), and clean separation of concerns.

Builder Pattern: Constructing Complex Objects Step by Step

When to use: You're building objects with many optional parameters, or when you want to make object construction more readable and self-documenting.

Real-world example: Building database queries or HTTP requests with many optional parameters:

// Query Builder - Makes complex queries readable
class QueryBuilder {
  constructor(table) {
    this.table = table;
    this.filters = [];
    this.sorting = [];
  }

  where(column, operator, value) {
    this.filters.push({ column, operator, value });
    return this; // Return 'this' for method chaining
  }

  orderBy(column, direction = 'ASC') {
    this.sorting.push({ column, direction });
    return this;
  }

  limit(count) {
    this.limitValue = count;
    return this;
  }

  build() {
    // Convert to SQL or API query
    return { table: this.table, filters: this.filters, sorting: this.sorting };
  }
}

// Usage - Super readable!
const query = new QueryBuilder('users')
  .where('status', '=', 'active')
  .where('age', '>', 18)
  .orderBy('created_at', 'DESC')
  .limit(10)
  .build();

2. Async Patterns: Handling Asynchronous Operations Like a Pro

Modern JavaScript is all about async operations. Here's how to handle them elegantly without callback hell or promise chains.

Async Generators: Processing Large Datasets Efficiently

When to use: You need to process large amounts of data (paginated APIs, file streams, database results) without loading everything into memory at once.

Real-world example: Fetching all users from a paginated API:

// Async generator for paginated data
async function* fetchAllUsers() {
  let page = 1;
  let hasMore = true;

  while (hasMore) {
    const response = await fetch(`/api/users?page=${page}`);
    const data = await response.json();

    // Yield each user one by one
    for (const user of data.users) {
      yield user;
    }

    hasMore = data.hasMore;
    page++;
  }
}

// Usage - Process millions of users without memory issues!
for await (const user of fetchAllUsers()) {
  await processUser(user); // Handle one user at a time
  console.log(`Processed: ${user.name}`);
}

Why this is powerful: You process one item at a time, keeping memory usage low. Perfect for large datasets, file processing, or streaming data.

Managing Concurrent Operations with Task Queues

When to use: You need to run multiple async operations but want to limit how many run simultaneously (to avoid overwhelming servers or using too much bandwidth).

Without limiting (chaos):         With queue (controlled):
Request 1-1000 → Server 💥       Request 1-5   → Server ✓
                                 Request 6-10  → Server ✓
                                 Request 11-15 → Server ✓
                                 (Controlled flow = stable performance)

Real-world example: Downloading 1000 images but only 5 at a time:

// Simple concurrency limiter
class TaskQueue {
  constructor(maxConcurrent = 5) {
    this.maxConcurrent = maxConcurrent;
    this.running = 0;
    this.queue = [];
  }

  async add(task) {
    // Wait if we're at max capacity
    while (this.running >= this.maxConcurrent) {
      await new Promise(resolve => setTimeout(resolve, 100));
    }

    this.running++;
    try {
      return await task();
    } finally {
      this.running--;
    }
  }
}

// Usage - Download 1000 images, max 5 at a time
const queue = new TaskQueue(5);
const imageUrls = ['url1.jpg', 'url2.jpg', /* ...1000 more */];

const downloads = imageUrls.map(url => 
  queue.add(() => fetch(url).then(r => r.blob()))
);

const images = await Promise.all(downloads);
console.log(`Downloaded ${images.length} images!`);

Retry Logic with Exponential Backoff

When to use: External APIs can fail temporarily. Instead of giving up immediately, retry with increasing delays (exponential backoff).

// Retry with exponential backoff - handles flaky APIs
async function retryWithBackoff(fn, maxRetries = 3) {
  let delay = 1000; // Start with 1 second

  for (let attempt = 0; attempt <= maxRetries; attempt++) {
    try {
      return await fn();
    } catch (error) {
      if (attempt === maxRetries) throw error;

      console.log(`Attempt ${attempt + 1} failed, retrying in ${delay}ms...`);
      await new Promise(resolve => setTimeout(resolve, delay));
      delay *= 2; // Double the delay each time (1s, 2s, 4s, 8s)
    }
  }
}

// Usage
const data = await retryWithBackoff(
  () => fetch('/api/flaky-endpoint').then(r => r.json()),
  3
);

3. Functional Programming: Writing Predictable Code

Functional programming isn't about fancy math—it's about writing code that's easier to test, debug, and reason about.

Pure Functions: Same Input, Same Output

When to use: Whenever possible! Pure functions have no side effects and always return the same result for the same input.

// ✅ GOOD: Pure function - predictable and testable
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// ❌ BAD: Impure - modifies external state
let globalTotal = 0;
function addToTotal(price) {
  globalTotal += price; // Side effect!
  return globalTotal;
}

// More pure function examples
const formatCurrency = (amount) => `$${amount.toFixed(2)}`;
const filterActive = (users) => users.filter(u => u.status === 'active');
const sortByDate = (items) => [...items].sort((a, b) => b.date - a.date);

Function Composition: Building Complex Logic from Simple Pieces

When to use: You have a series of transformations to apply to data. Instead of nesting functions or using temporary variables, chain them together.

// Simple pipe function - processes data step by step
const pipe = (...functions) => (initialValue) =>
  functions.reduce((value, fn) => fn(value), initialValue);

// Example: Clean up and transform user data
const users = [
  { id: 1, name: 'John Doe', age: 30, status: 'active' },
  { id: 2, name: 'Jane Smith', age: 25, status: 'inactive' },
  { id: 3, name: 'Bob Johnson', age: 35, status: 'active' },
];

// Define small, reusable functions
const getActive = (users) => users.filter(u => u.status === 'active');
const sortByAge = (users) => [...users].sort((a, b) => b.age - a.age);
const getNames = (users) => users.map(u => u.name);

// Combine them into a pipeline
const getActiveUserNames = pipe(getActive, sortByAge, getNames);

const result = getActiveUserNames(users);
// Result: ['Bob Johnson', 'John Doe']

4. Event-Driven Patterns: Decoupling Your Code

Events let different parts of your app communicate without being tightly coupled. Think of it like a radio station—components can broadcast messages, and others can tune in to listen.

Simple Event Emitter Pattern

When to use: You want components to communicate without directly knowing about each other. Perfect for UI updates, analytics tracking, or state synchronization.

// Simple event system
class EventBus {
  constructor() {
    this.events = {};
  }

  // Subscribe to an event
  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);

    // Return unsubscribe function
    return () => {
      this.events[eventName] = this.events[eventName].filter(cb => cb !== callback);
    };
  }

  // Emit an event
  emit(eventName, data) {
    const callbacks = this.events[eventName] || [];
    callbacks.forEach(callback => callback(data));
  }
}

// Usage - Multiple parts of your app can listen
const events = new EventBus();

// Component 1: Listen for user login
events.on('user:login', (user) => {
  console.log(`Welcome, ${user.name}!`);
  updateUI(user);
});

// Component 2: Track analytics
events.on('user:login', (user) => {
  analytics.track('login', { userId: user.id });
});

// Component 3: Load user data
events.on('user:login', async (user) => {
  const preferences = await loadUserPreferences(user.id);
  applyPreferences(preferences);
});

// Trigger the event - all listeners execute
events.emit('user:login', { id: 123, name: 'John' });

5. Error Handling: Graceful Failures

Good error handling is what separates amateur code from production-ready code. Here's how to handle errors elegantly.

Result Pattern: Making Errors Explicit

When to use: You want to handle errors as data instead of using try-catch everywhere. Makes error handling explicit and forces you to consider failure cases.

// Simple Result wrapper
class Result {
  constructor(value, error) {
    this.value = value;
    this.error = error;
  }

  static ok(value) {
    return new Result(value, null);
  }

  static err(error) {
    return new Result(null, error);
  }

  isOk() {
    return this.error === null;
  }

  isErr() {
    return this.error !== null;
  }
}

// Usage in API calls
async function fetchUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) {
      return Result.err(`HTTP Error: ${response.status}`);
    }
    const user = await response.json();
    return Result.ok(user);
  } catch (error) {
    return Result.err(`Network error: ${error.message}`);
  }
}

// Handle the result explicitly
const result = await fetchUser(123);

if (result.isOk()) {
  console.log('User:', result.value);
  updateUI(result.value);
} else {
  console.error('Failed:', result.error);
  showErrorMessage(result.error);
}

6. Practical Tips & Best Practices

When to Use Each Pattern: Quick Reference

Common Pitfalls to Avoid

Testing Your Patterns

Good patterns make testing easier. Here's how to test each:

// Testing pure functions - Easy!
test('calculateTotal adds prices correctly', () => {
  const items = [{ price: 10 }, { price: 20 }];
  expect(calculateTotal(items)).toBe(30);
});

// Testing factories - Mock dependencies
test('factory creates admin service with correct permissions', () => {
  const factory = new UserServiceFactory();
  const service = factory.create('admin');
  expect(service.permissions).toContain('delete');
});

// Testing async generators - Iterate and assert
test('fetchAllUsers yields correct data', async () => {
  const users = [];
  for await (const user of fetchAllUsers()) {
    users.push(user);
    if (users.length >= 5) break; // Limit for testing
  }
  expect(users).toHaveLength(5);
});

// Testing event emitters - Spy on callbacks
test('event emitter calls all subscribers', () => {
  const bus = new EventBus();
  const spy1 = jest.fn();
  const spy2 = jest.fn();
  
  bus.on('test', spy1);
  bus.on('test', spy2);
  bus.emit('test', 'data');
  
  expect(spy1).toHaveBeenCalledWith('data');
  expect(spy2).toHaveBeenCalledWith('data');
});

Conclusion: Patterns Are Tools, Not Rules

After years of writing JavaScript, here's what I've learned about design patterns:

• Start simple: Don't reach for patterns immediately. Let complexity emerge, then refactor
• Prioritize readability: Your team (including future you) should understand the code in 6 months
• Test early: Good patterns make testing easier. If testing is hard, reconsider your design
• Stay pragmatic: The best code solves real problems, not showcases every pattern you know

Remember: Patterns are recipes, not laws. Use them when they make your code clearer, more maintainable, and easier to test. Skip them when they don't.

Modern JavaScript gives us incredible tools—async/await, destructuring, modules, and more. Combined with these battle-tested patterns, you can build applications that scale from quick prototypes to production systems serving millions.

Happy coding! May your functions be pure and your promises always resolve. ⚡