What is the strategy pattern?

JavaScript

The short answer

The strategy pattern lets you define a family of algorithms, put each one in a separate function or object, and make them interchangeable. Instead of hardcoding the logic, you pass the strategy as a parameter. This makes it easy to switch behavior without changing the code that uses it.

How it works

// Define strategies
const strategies = {
  creditCard(amount) {
    console.log(`Paying $${amount} with credit card`);
    return { success: true, method: 'creditCard' };
  },
  paypal(amount) {
    console.log(`Paying $${amount} with PayPal`);
    return { success: true, method: 'paypal' };
  },
  bitcoin(amount) {
    console.log(`Paying $${amount} with Bitcoin`);
    return { success: true, method: 'bitcoin' };
  },
};
// Use the strategy
function processPayment(amount, method) {
  const strategy = strategies[method];
  if (!strategy)
    throw new Error(`Unknown payment method: ${method}`);
  return strategy(amount);
}
processPayment(100, 'paypal');
processPayment(50, 'creditCard');

Adding a new payment method is just adding a new function to strategies. You do not need to change processPayment.

Common use cases

Sorting with different comparators:

const sortStrategies = {
  priceAsc: (a, b) => a.price - b.price,
  priceDesc: (a, b) => b.price - a.price,
  nameAsc: (a, b) => a.name.localeCompare(b.name),
  newest: (a, b) => new Date(b.date) - new Date(a.date),
};
function sortProducts(products, strategy) {
  return [...products].sort(sortStrategies[strategy]);
}

Form validation:

const validators = {
  required: (value) =>
    value.trim() !== '' || 'This field is required',
  email: (value) => value.includes('@') || 'Invalid email',
  minLength: (min) => (value) =>
    value.length >= min ||
    `Must be at least ${min} characters`,
};

In React — rendering strategies:

const layouts = {
  grid: GridLayout,
  list: ListView,
  table: TableView,
};
function ProductDisplay({ products, layout }) {
  const Layout = layouts[layout];
  return <Layout products={products} />;
}

Why it is better than if/else chains

// Without strategy pattern — hard to extend
function sort(products, type) {
  if (type === 'priceAsc')
    return products.sort((a, b) => a.price - b.price);
  if (type === 'priceDesc')
    return products.sort((a, b) => b.price - a.price);
  if (type === 'nameAsc')
    return products.sort((a, b) =>
      a.name.localeCompare(b.name)
    );
  // Adding more types means more if/else
}
// With strategy pattern — easy to extend
const strategies = { priceAsc, priceDesc, nameAsc };
// Adding a new strategy is just adding a new entry

Interview Tip

The payment or sorting example works best. Show the strategies as an object of functions, and a main function that picks the right strategy. The key benefit is that adding new behavior does not require changing existing code — you just add a new strategy.

Why interviewers ask this

The strategy pattern is one of the most practical design patterns. It comes up whenever you have multiple ways to do something (sort, validate, pay, render). Interviewers want to see if you can avoid long if/else chains and write code that is easy to extend.

Table of Contents