Junior Design Patterns Interview Questions (50 MCQs)

Question 1

In React, what is usually preferred over inheritance?

Accepted Answer

Composition

Answer

Deep class hierarchies

Answer

Only global mutable singletons

Answer

Removing props

Question 2

What is an HOC?

Accepted Answer

A function that takes a component and returns an enhanced one

Answer

A built-in browser hook

Answer

A CSS file

Answer

A database

Question 3

What are Render Props?

Accepted Answer

A component takes a function prop to let the consumer render UI

Answer

Inline styles only

Answer

Removing JSX entirely

Answer

A Vue-only pattern

Question 4

What does DRY mean?

Accepted Answer

Don't Repeat Yourself: each piece of knowledge has one representation

Answer

Do Repeat Yourself

Answer

Never test code

Answer

Write everything in one file

Question 5

What does the Single Responsibility Principle mean for components?

Accepted Answer

Each component/module has one reason to change

Answer

Each component has one line of code

Answer

Only one component in the app

Answer

Each component takes one prop

Question 6

What is the Container/Presentational pattern?

Accepted Answer

Containers handle data/logic; presentational components render UI from props

Answer

Every component fetches its own data

Answer

Class components only

Answer

A CSS-only pattern

Question 7

What is the Singleton pattern?

Accepted Answer

Ensuring only one instance of a class/module exists

Answer

A component that renders once

Answer

An array with one item

Answer

A function with no parameters

Question 8

What does a factory function do?

Accepted Answer

Creates objects and hides construction details

Answer

Deletes objects

Answer

Only copies classes

Answer

Generates CSS

Question 9

What does the Module pattern offer?

Accepted Answer

Encapsulation: only a public API is exported, the rest stays private

Answer

All variables become global

Answer

Faster network

Answer

No need for imports

Question 10

What does the KISS principle say?

Accepted Answer

Keep solutions as simple as possible and avoid unnecessary complexity

Answer

Always use as many design patterns as possible

Answer

Write code in one big file for speed

Answer

Implement all future requirements before writing code

Question 11

What does YAGNI mean?

Accepted Answer

Don't build a feature until you actually need it

Answer

Every function must have at least three parameters

Answer

All components must be generic

Answer

Write tests only after release

Question 12

What does the Liskov Substitution Principle say in simple terms?

Accepted Answer

A subtype must be usable in place of its base type without breaking behavior

Answer

Each class should have only one method

Answer

Classes must never inherit from each other

Answer

All variables must be private

Question 13

What does the Interface Segregation Principle recommend?

Accepted Answer

Clients shouldn't be forced to depend on methods they don't use

Answer

Merge all interfaces into one file

Answer

Every interface must have exactly ten methods

Answer

Don't use interfaces, only classes

Question 14

What does the Dependency Inversion Principle state?

Accepted Answer

High- and low-level modules should both depend on abstractions, not details

Answer

Low-level modules should import high-level modules

Answer

Dependencies should be sorted alphabetically

Answer

No module may depend on any other module

Question 15

What is prop drilling in React?

Accepted Answer

Passing props through intermediate components that don't use them

Answer

Mutating props directly inside a child

Answer

Defining props with TypeScript

Answer

Using props inside useEffect

Question 16

Two sibling components need shared state. What is the common pattern?

Accepted Answer

Move the state to their closest common parent (lifting state up)

Answer

Duplicate the state in both components

Answer

Put the state in a global window variable

Answer

Sync them using refs

Question 17

What is Separation of Concerns?

Accepted Answer

Splitting a program into parts that each address a distinct concern

Answer

Separating files by their size

Answer

Writing CSS and JS in the same file

Answer

Putting every function in its own repository

Question 18

When is the Builder pattern a good fit?

Accepted Answer

Constructing a complex object step by step with many options

Answer

Ensuring only one instance of a class exists

Answer

Notifying multiple subscribers of changes

Answer

Converting one interface to another

Question 19

What is the idea of the Prototype pattern and how does it appear in JavaScript?

Accepted Answer

Creating new objects by cloning or inheriting from an existing one, like `Object.create(proto)`

Answer

Restricting object creation to a single instance

Answer

Hiding a complex system behind a simple API

Answer

Storing state history for undo

Question 20

What does the Decorator pattern do?

Accepted Answer

Adds behavior by wrapping an object or function without changing its code

Answer

Splits a class into several small classes

Answer

Is used only to style components

Answer

Removes duplicate instances

Question 21

What is the Proxy pattern and what JavaScript feature supports it?

Accepted Answer

A stand-in that controls access to the real object; `new Proxy(target, handler)`

Answer

A full copy of an object; `Object.assign`

Answer

An abstract base class; `abstract class`

Answer

A global event bus; `EventTarget`

Question 22

How is the Iterator pattern implemented in JavaScript?

Accepted Answer

By implementing `Symbol.iterator`, returning an object with a `next()` method

Answer

By mandatorily defining a `forEach` method on every object

Answer

By using `setInterval`

Answer

It's only possible with arrays

Question 23

What problem does the Mediator pattern solve?

Accepted Answer

Reduces direct coupling by routing component communication through a mediator object

Answer

Building complex objects step by step

Answer

Caching API responses

Answer

Converting callbacks into Promises

Question 24

What is the idea of the GoF State pattern?

Accepted Answer

An object's behavior changes with its internal state, each state encapsulating its own logic

Answer

All data must be kept in useState

Answer

State must never change

Answer

Every component must have global state

Question 25

What is the Template Method pattern?

Accepted Answer

A base class defines an algorithm's skeleton and subclasses implement specific steps

Answer

A ready-made HTML file for pages

Answer

Using template literals to build strings

Answer

Copying code between several classes

Question 26

What structure does the Composite pattern model?

Accepted Answer

A tree where leaves and groups are treated through the same interface

Answer

A simple linked list

Answer

A priority queue

Answer

A class with many static methods

Question 27

Which example illustrates the Chain of Responsibility pattern?

Accepted Answer

Middlewares that process a request in order and can pass it to the next

Answer

A class with only one instance

Answer

A function that creates a new object

Answer

A component that only renders UI

Question 28

What is the goal of the Flyweight pattern?

Accepted Answer

Reducing memory by sharing common data across many objects

Answer

Making CSS lighter by minifying

Answer

Removing unused components

Answer

Speeding up the network with compression

Question 29

What is the Memento pattern used for?

Accepted Answer

Saving a snapshot of an object's state to restore it without exposing internals

Answer

Memoizing function results

Answer

Connecting to a WebSocket

Answer

Defining a component with `React.memo`

Question 30

What is the benefit of using the `children` prop in a `Card` component?

Accepted Answer

The Card can render arbitrary content without knowing its details

Answer

The Card no longer needs to render

Answer

Only text strings can be passed

Answer

It makes the Card automatically memoized

Question 31

Which definition correctly describes a pure function?

Accepted Answer

Returns the same output for the same input and has no side effects

Answer

Takes no parameters

Answer

Is always async

Answer

Is only defined inside a class

Question 32

Why should state be updated immutably in React?

Accepted Answer

React detects changes by reference; mutating may prevent re-renders

Answer

Because JavaScript doesn't allow mutating arrays

Answer

Because immutability always uses less memory

Answer

Because TypeScript won't compile otherwise

Question 33

What clean-code issue exists in `if (status === 3)`?

Accepted Answer

It uses a magic number; a named constant or enum would be clearer

Answer

It should use `==` instead of `===`

Answer

The number 3 isn't allowed in JavaScript

Answer

Conditions must never contain numbers

Question 34

Which name is better for a boolean variable?

Accepted Answer

`isModalOpen`

Answer

`modal`

Answer

`flag2`

Answer

`data`

Question 35

How do guard clauses (early returns) improve readability?

Accepted Answer

They handle edge cases early and avoid deeply nested ifs

Answer

They always make functions run faster

Answer

They replace try/catch

Answer

They make functions never return a value

Question 36

What does a function named `saveUserAndSendEmailAndLog` indicate?

Accepted Answer

It does several things and should be split into smaller functions

Answer

It's excellent naming and needs no change

Answer

The function must be async

Answer

It must become a class to work

Question 37

What is the AAA pattern in writing tests?

Accepted Answer

Arrange, Act, Assert: set up, perform the action, verify the result

Answer

Async, Await, Assert

Answer

All, Any, Always

Answer

Add, Apply, Approve

Question 38

What is the main difference between a unit test and an integration test?

Accepted Answer

A unit test checks one unit in isolation; an integration test checks parts working together

Answer

Unit tests only run in the browser

Answer

Integration tests need no assertions

Answer

There's no difference besides the name

Question 39

What is the difference between a stub and a mock in testing?

Accepted Answer

A stub returns canned answers; a mock also verifies how it was called

Answer

A stub is only for CSS

Answer

A mock always connects to the real server

Answer

Neither is used in frontend testing

Question 40

What does the test pyramid recommend?

Accepted Answer

Many unit tests, fewer integration tests, and few E2E tests

Answer

Write only E2E tests

Answer

Have equal numbers of every test type

Answer

Run tests in alphabetical order

Question 41

Why must a custom hook's name start with `use`?

Accepted Answer

So React and the linter can enforce the Rules of Hooks on it

Answer

Because JavaScript throws a syntax error otherwise

Answer

So it's automatically memoized

Answer

So it only runs on the server

Question 42

In MVC architecture, what is the Controller's role?

Accepted Answer

Handles user input, updates the Model, and coordinates the View

Answer

Only stores data in the database

Answer

Only renders HTML and CSS

Answer

Compresses static files

Question 43

What is a barrel file (e.g. an `index.ts` that re-exports several modules) for?

Accepted Answer

Providing a single, clean import entry point for a folder

Answer

Running tests in parallel

Answer

Compressing JavaScript files

Answer

Defining environment variables

Question 44

How does a feature-based folder structure differ from a type-based one?

Accepted Answer

Files for one feature live together instead of being grouped by file type

Answer

All components go into a single `components` folder

Answer

Every file sits in its own same-named folder

Answer

It's only for backend projects

Question 45

What is a code smell?

Accepted Answer

A surface sign in code that likely points to a deeper design problem

Answer

A syntax error that prevents execution

Answer

A definite security bug

Answer

A file with a large size

Question 46

What is the common fix for callback hell in JavaScript?

Accepted Answer

Using Promises and `async/await` to flatten async flow

Answer

Using `var` instead of `let`

Answer

Wrapping all code in a `setTimeout`

Answer

Removing error handling

Question 47

What is a mixin in JavaScript?

Accepted Answer

A way to add reusable behavior to objects or classes without direct inheritance

Answer

Merging two CSS files

Answer

A new data type in ES2020

Answer

A component that mounts only once

Question 48

What's the desirable goal for modules in terms of coupling and cohesion?

Accepted Answer

Low coupling and high cohesion

Answer

High coupling and low cohesion

Answer

Both high

Answer

Both low

Question 49

Which principle does `order.getCustomer().getAddress().getCity()` violate?

Accepted Answer

Law of Demeter (talk only to your immediate friends)

Answer

Open/Closed Principle

Answer

DRY

Answer

Single Source of Truth

Question 50

Why is `createUser({ name, age, isAdmin })` often better than `createUser(name, age, isAdmin)`?

Accepted Answer

Parameters are named, order-independent, and easy to make optional

Answer

It always runs faster

Answer

It removes the need for TypeScript

Answer

It only works in classes

Design Patterns · Junior · 50

In React, what is usually preferred over inheritance?