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

1// Define strategies
2const strategies = {
3  creditCard(amount) {
4    console.log(`Paying $${amount} with credit card`);
5    return { success: true, method: 'creditCard' };
6  },
7  paypal(amount) {
8    console.log(`Paying $${amount} with PayPal`);
9    return { success: true, method: 'paypal' };
10  },
11  bitcoin(amount) {
12    console.log(`Paying $${amount} with Bitcoin`);
13    return { success: true, method: 'bitcoin' };
14  },
15};
16
17// Use the strategy
18function processPayment(amount, method) {
19  const strategy = strategies[method];
20  if (!strategy)
21    throw new Error(`Unknown payment method: ${method}`);
22  return strategy(amount);
23}
24
25processPayment(100, 'paypal');
26processPayment(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:

1const sortStrategies = {
2  priceAsc: (a, b) => a.price - b.price,
3  priceDesc: (a, b) => b.price - a.price,
4  nameAsc: (a, b) => a.name.localeCompare(b.name),
5  newest: (a, b) => new Date(b.date) - new Date(a.date),
6};
7
8function sortProducts(products, strategy) {
9  return [...products].sort(sortStrategies[strategy]);
10}

Form validation:

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

In React — rendering strategies:

1const layouts = {
2  grid: GridLayout,
3  list: ListView,
4  table: TableView,
5};
6
7function ProductDisplay({ products, layout }) {
8  const Layout = layouts[layout];
9  return <Layout products={products} />;
10}

Why it is better than if/else chains

1// Without strategy pattern — hard to extend
2function sort(products, type) {
3  if (type === 'priceAsc')
4    return products.sort((a, b) => a.price - b.price);
5  if (type === 'priceDesc')
6    return products.sort((a, b) => b.price - a.price);
7  if (type === 'nameAsc')
8    return products.sort((a, b) =>
9      a.name.localeCompare(b.name)
10    );
11  // Adding more types means more if/else
12}
13
14// With strategy pattern — easy to extend
15const strategies = { priceAsc, priceDesc, nameAsc };
16// 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.

Finished reading?

Mark this topic as solved to track your progress.

What is the strategy pattern?