Interview Q&A

Questions, answered

67 frontend interview questions, each written out the way you would actually say it in the room — the analogy first, then the mechanism, then the follow-up they ask next. Scan the contents, or open a card for the full answer.

Contents 67

Mock round5

Code tasks10

JavaScript15

Async & timers2

React17

Performance7

Browser & network4

Security1

Architecture & tooling6

05JavaScript

Analogy: a closure is a function that leaves the room carrying a backpack. Whatever variables were in scope when it was created go with it wherever it is called, and nobody outside can reach…

12JavaScript

Analogy: shallow copy = photocopying a page that has addresses written on it. You get a new page, but both pages point to the same houses. Deep copy = rebuilding the houses too.

13JavaScript

Analogy: let and const are a note left on a desk in one room — walk out of the {} and it is gone. var ignores rooms entirely and belongs to the whole floor (the function), which is why it le…

25JavaScript

Analogy: a function like greet() says "Hi, my name is …" without knowing whose mouth it is in. These three decide who is speaking. call and apply say it right now on someone's behalf (the on…

37JavaScript

The one-line map of all six. Array = a numbered queue. Object = a form with printed labels (labels must be words). Map = a cloakroom: hand in a ticket, get the coat back — and the ticket can…

38JavaScript

A Set is just a list that refuses duplicates. Picture a plain array — same thing, one extra rule: the same value can never go in twice. You have ["a", "b", "c"] and you try to add another "b…

39JavaScript

Analogy — the cloakroom at a theatre. You hand over your coat and you get a numbered ticket. When you come back, the attendant does not walk down the rail looking at every coat until they sp…

40JavaScript

One line: an Object is a form with field labels printed on it — a known, fixed shape you fill in: name, email, age. A Map is an empty filing cabinet — you add and pull drawers all day and yo…

41JavaScript

Analogy — the lost property office vs. a sticky note. A normal Map is the lost property office: once an umbrella is logged in there, it stays in the building forever, because the office is s…

42JavaScript

Where the line is: a WeakMap remembers something about an object — "this row is 42px tall". A WeakSet remembers only that you have seen an object — "I already dealt with this one". It is the…

44JavaScript

Analogy: an object literal is writing one thing by hand. A class or constructor is a cookie cutter — stamp out a hundred, and they all share one recipe card (the prototype) rather than each…

45JavaScript

Why copying is a question at all. Objects are held by reference, so const b = a does not copy anything — both names point at the same object, and "changing b" changes what a sees too. Copyin…

46JavaScript

Analogy: a property is not a value, it is a file with permission bits on it. Can it be overwritten (writable)? Does it show up when someone lists the folder (enumerable)? Can it be deleted o…

47JavaScript

Analogy: a normal function is a vending machine that dumps the whole shelf at once — one press, everything falls out, done. A generator is a ticket dispenser: you press it, you get number 1,…

58JavaScript

What is the difference between prototypal and classical inheritance — and which one does JavaScript have?

16React

What is the difference between the Virtual DOM and the real DOM — and is the Virtual DOM faster?

17React

Analogy: Virtual DOM vs Real DOM was "compare the blueprints." This is how the comparison is run. Imagine the renovation list is huge and the client keeps walking in with urgent changes. The old React read the…

23React

Analogy: a ref is a pocket. You can put something in it and take it out later, it stays with you across re-renders — and nobody can see what is in it, so putting something in does not change…

27React

Analogy: same idea at two different sizes. useMemo is keeping one ingredient you already chopped. React.memo is keeping the whole finished dish and not cooking it again because the order has…

28React

Analogy: you do not rearrange a room by shoving furniture around while people watch. You sketch the new arrangement (render — cheap, on paper, throw it away if you change your mind), compare…

29React

Analogy: the stage is set but the curtain has not gone up yet. useLayoutEffect is your last chance to walk out and move a chair while the audience still cannot see. useEffect runs after the…

30React

Analogy: who holds the pen? Controlled = you are reading over the user's shoulder and writing every letter into your own notebook as they type; the notebook is the truth, the paper just mirr…

31React

Analogy for the rule everyone breaks: React stores your hooks in numbered lockers, assigned by the order you asked for them — not by name. First useState gets locker 1, the next gets locker…

34React

Analogy: prop drilling is passing a note through six people who do not care what it says just to reach the person at the end — and every one of them has to be told the note exists, so changi…

35React

Analogy: Redux is a bank ledger. You never reach in and edit the balance; you write down a transaction ("deposited 50"), and the balance is whatever you get from replaying the transactions.…

36React

Analogy: a blank form template versus the clerk who fills it in. The template knows nothing about where the data comes from, so you can reuse it or photocopy it for a demo. The clerk knows t…

60React

A form needs to focus the <Input> component you wrote after a failed validation. Why doesn't passing it a ref work, and how do you make it work?

61React

You have a <Modal> that the parent needs to open and close. How would you expose that, and when is a ref the right call instead of props?

62React

Walk me through a component's lifecycle. Where does each phase live in a function component, and how does that map to the class methods?

64React

Plain version: it looks like HTML sitting inside JavaScript. It isn't. The browser never sees a line of it — a build step rewrites it into ordinary function calls before it ships, and those…

65React

What is the difference between props and state, and how do you decide which one a piece of data should be?

66React

A search box sits above 10,000 rows and filtering takes 200ms. Typing feels broken. What are useTransition and useDeferredValue doing about it, and which one would you reach for?

Questions, answered

Mock round

The box model and box-sizing

Event order on nested elements

A long list that freezes while filtering

Client-side routing for a small SPA

A shared component library

Code tasks

setTimeout, built out of a Promise

A timer with Start, Pause and Reset

A list you can add to and delete from

Writing a polyfill

Throttle (and debounce)

A useDebounce hook, and why cleanup matters

What is the console output order?

Which console.log runs, on mount and on click?

Length of the last word

Write a curry function

JavaScript

Closures

Deep vs shallow copy

var vs let vs const

call, apply, bind

ECMAScript collection types

What is a Set?

What is a Map?

Map vs Object

WeakMap — and why we need it

WeakSet — and how it differs from WeakMap

How do we create an object in JS?

Methods to copy an object (shallow and deep)

Object property descriptors

Generators — and what happens on yield

Prototypal inheritance vs classical inheritance

Async & timers

The event loop and execution order

Promise methods for multiple parallel requests

React

Virtual DOM vs Real DOM

Diffing, reconciliation, Fiber

useRef

React.memo vs useMemo

How React renders UI changes

useLayoutEffect

Controlled vs uncontrolled inputs

Custom hook restrictions

Why do we need external state management?

The three principles of Redux

Presentational vs container components

forwardRef — and why React 19 retired it

useImperativeHandle

The component lifecycle

What is JSX?

Props vs state

useTransition vs useDeferredValue

Performance

Core Web Vitals

useMemo and useCallback

Code splitting

Measuring React performance

How to optimize performance in a React app

1,000 rows without hurting performance → virtualization

Making a data-heavy page fast

Browser & network

WebSockets

WebSocket vs HTTP

Web Workers

How HTML and CSS get to the screen

Security

Frontend vulnerabilities

Architecture & tooling

Tech Lead breadth round — rapid fire

Webpack

Next.js rendering strategies

JavaScript design patterns

Runtime vs build time vs compile time

Dynamic routing