Design Patterns Interview Questions and Answers

Sample questions

A few questions from each level with the correct answer and an explanation.

Design Patterns · Junior

1. What is a design pattern?

   Correct answer: A typical solution to a commonly occurring design problem

   A pattern isn't code but a description of an idea: what problem it solves, what parts the solution consists of, and its pros and cons. The implementation depends on the language and context. Knowing patterns gives a team a shared vocabulary: "we need a strategy here" is clear without long explanations.

2. Into which three groups are the classic GoF patterns divided?

   Correct answer: Creational, structural, behavioral

   Creational patterns deal with creating objects (Factory, Builder, Singleton), structural ones with composing objects (Adapter, Decorator, Facade), behavioral ones with interaction and distribution of responsibilities (Observer, Strategy, Command). The "Gang of Four" book (1994) described 23 patterns.

3. What does the Singleton pattern guarantee?

   Correct answer: A class has only one instance and a global access point to it

   Examples: one API client, one logger, one DB connection. In JS, the simplest singleton is a module: export const api = new ApiClient() - a module runs once, and all importers get the same object.

4. Why is Singleton often called an anti-pattern?

   Correct answer: It introduces hidden global state and makes testing harder

   Code that accesses a singleton directly depends on it implicitly: tests affect each other, and swapping the implementation is hard. A compromise is to create one instance but pass it explicitly (dependency injection) so tests can substitute a mock.

Design Patterns · Middle

1. How does Decorator differ from Proxy if their structure is similar?

   Correct answer: By intent: Decorator adds behavior, Proxy controls access to the object

   Both wrap an object with the same interface. Decorators are usually stacked to build up functionality (logging + cache + retry). A proxy manages lifecycle and access: lazy loading, permission checks, a remote object. Many patterns differ precisely by their goal.

2. How does Adapter differ from Facade?

   Correct answer: Adapter fits an interface to the expected one, Facade simplifies working with a subsystem

   An adapter usually wraps one object and makes it compatible with existing code. A facade defines a new, simpler interface over many objects. In practice, an API layer often combines both: a facade over HTTP and adapters for the data.

3. When is an Abstract Factory appropriate instead of a simple factory?

   Correct answer: When you need families of related, compatible objects

   Example: a UI kit for two platforms - the factory creates a button, an input and a modal in one style, and they can't be mixed. A simple factory picks one product by a parameter. Don't introduce an abstract factory if there's only one family.

4. What's dangerous about a module-level singleton (export const cache = new Map()) in an SSR app?

   Correct answer: On the server the module is shared by all requests, so users' data gets mixed

   In the browser, a module variable lives within one tab. A server process serves thousands of users, and a shared module-level cache or store can serve one user's data to another. Request state is created per request (e.g. React's cache(), a QueryClient per request).

Design Patterns · Senior

1. How does the "signals" model (Solid, Preact Signals, Angular Signals) differ from React's model?

   Correct answer: Only the dependent places update, without re-rendering the component

   A signal is a reactive value (Observer): reading registers a dependency, and writing updates exactly its subscribers (text, an attribute, a computation). React instead re-renders the component and diffs the virtual tree; the React Compiler reduces that cost, but the model is different.

2. What's the main trade-off of micro-frontends?

   Correct answer: Independent teams and deploys at the cost of complexity, duplication and UX consistency

   Micro-frontends are justified with many autonomous teams and a large product: each part is deployed separately. The cost is duplicated dependencies, complex integration, shared design, routing and communication between parts. Smaller teams usually do fine with a modular monolith.

3. Why is React declared as a shared singleton in Module Federation?

   Correct answer: Two copies of React in one app break hooks and context

   Hooks and context are tied to a specific React instance: a component from a remote module with its own copy causes "Invalid hook call", and contexts aren't visible. Shared singleton dependencies require coordinating versions between teams.

4. How does the Strangler Fig pattern work when migrating a legacy frontend?

   Correct answer: The new system gradually takes over routes and features of the old one until it disappears

   For example, a proxy routes /checkout to the new Next.js app and everything else to the old one. Risks are lower than with a "big rewrite": value is delivered gradually, and you can roll back at any step.

Combined quizzes with this topic

Questions from several topics at once - just like an interview for a specific role.