JavaScript mock interview: practice out loud

What is the difference between var, let and const?

What a strong answer covers:var is function-scoped and hoisted with an initial value of undefined, while let and const are block-scoped and sit in the temporal dead zone until their declaration runs, so early access throws a ReferenceError. const forbids reassignment of the binding, not mutation: a const object or array can still be changed. A good answer adds that let/const fix the closure-in-a-loop bug because each iteration gets a new binding.

What is the difference between == and ===?

What a strong answer covers:=== compares without type conversion, while == applies coercion rules first, which leads to results like 0 == "" being true. Mention the useful special case: null == undefined is true, so x == null checks for both, and NaN is not equal to anything, including itself (use Number.isNaN). Default to === and use == null only intentionally.

What is a closure? Give a practical example.

What a strong answer covers:A closure is a function together with the lexical scope it was created in, so it can still read and update outer variables after the outer function has returned. Practical uses: private state like a counter or memoize cache, factory functions, and event handlers that remember config. Strong candidates mention the cost too: a closure keeps captured objects alive, which can cause memory leaks.

What does typeof null return, and how do you check that a value is an array?

What a strong answer covers:typeof null returns 'object', a historical bug kept for backward compatibility, so null needs an explicit === null check. typeof an array is also 'object', so use Array.isArray(value), which works across iframes, unlike instanceof Array. Bonus: typeof a function returns 'function', and typeof on an undeclared variable returns 'undefined' instead of throwing.

What is event delegation and why use it?

What a strong answer covers:Most DOM events bubble from the target up through its ancestors, so you can attach one listener to a parent and use event.target (often with closest()) to find which child was clicked. This saves memory, works for elements added later, and simplifies cleanup. Mention that some events like focus do not bubble (use focusin), and the difference between stopPropagation and preventDefault.

What does this log and why: console.log(1); setTimeout(() => console.log(2), 0); Promise.resolve().then(() => console.log(3)); console.log(4);

What a strong answer covers:It logs 1, 4, 3, 2. The synchronous logs run first; the .then callback goes to the microtask queue and setTimeout to the task (macrotask) queue. After the current script finishes, the event loop drains all microtasks before taking the next task, so 3 prints before 2 even with a 0 ms delay.

How is the value of this determined?

What a strong answer covers:For regular functions this depends on how the function is called: new binds the new object, call/apply/bind set it explicitly, obj.method() sets it to obj, and a plain call gives undefined in strict mode (globalThis in sloppy mode). Arrow functions have no own this and take it from the enclosing scope. The common bug is passing obj.method as a callback and losing this, fixed with bind or an arrow wrapper.

Compare Promise.all, Promise.allSettled, Promise.race and Promise.any.

What a strong answer covers:all resolves with all values in order and rejects on the first rejection; allSettled waits for everything and returns status objects, never rejecting. race settles with whichever promise settles first, success or failure; any resolves with the first fulfillment and rejects with an AggregateError only if all reject. None of them cancel the remaining work, so mention AbortController if cancellation matters.

How do classes relate to prototypes in JavaScript?

What a strong answer covers:class is mostly syntax over constructor functions: methods live on Class.prototype, and instances find them through the [[Prototype]] chain, while extends links both the prototypes and the constructors. Differences from plain functions: class bodies are strict mode, classes must be called with new, and declarations are in the temporal dead zone until evaluated. True private fields (#field) and static blocks are real class-only features, not just sugar.

Explain debounce vs throttle and how you would implement debounce.

What a strong answer covers:Debounce runs a function only after calls have stopped for N ms (search input, resize end); throttle runs it at most once per N ms (scroll, mousemove). Debounce is a closure holding a timer id: on each call clear the previous timeout and set a new one that applies the original function with the latest arguments and this. Good answers mention leading/trailing options and cancelling the pending call on cleanup.

How would you find and fix a memory leak in a long-running single-page app?

What a strong answer covers:GC frees only unreachable objects, so leaks are things still referenced by mistake: listeners and timers never removed, closures capturing large data, detached DOM nodes held in variables, unbounded caches or global stores. To diagnose, take heap snapshots in DevTools before and after repeating an action and compare retained objects and their retainer paths. Fixes include removing listeners on teardown (an AbortController signal removes many at once), bounding caches, and using WeakMap for metadata keyed by objects.

What are the practical differences between ES modules and CommonJS?

What a strong answer covers:ESM imports are static and resolved before execution, which enables tree shaking, top-level await and live bindings to exported values; CommonJS require is a synchronous function call at runtime that returns the module.exports object. ESM is always strict mode and uses import.meta instead of __dirname. On interop, mention that current Node versions can require() synchronous ES modules, while modules using top-level await still need import().

A heavy computation freezes the UI. How do you keep the page responsive?

What a strong answer covers:JavaScript runs on the main thread, and the browser can only render or handle input between tasks, so long tasks hurt responsiveness and INP. Options: split work into chunks and yield back to the event loop (scheduler.yield() where supported, otherwise setTimeout or MessageChannel), move CPU-heavy work into a Web Worker, and avoid layout thrashing by batching DOM reads and writes. Measure first with the Performance panel or the Long Animation Frames API.

What are the common pitfalls of async/await in production code?

What a strong answer covers:Awaiting independent calls one by one makes them sequential; start them together and use Promise.all. A missing await or a floating promise means try/catch does not see the error and you get an unhandled rejection. Array.forEach does not wait for async callbacks, so use for...of for sequential or map plus Promise.all for parallel, and remember every await resumes in a microtask, so code after it runs later than it looks.

How would you implement cancellation and avoid race conditions in async UI flows?

What a strong answer covers:Use AbortController: pass its signal to fetch and your own async functions, and abort the previous request when a new one starts, for example in search-as-you-type, so a stale response cannot overwrite a newer one. AbortSignal.timeout() adds deadlines and AbortSignal.any() combines signals. Mention that aborting rejects with an AbortError, which you should handle separately from real failures, and that the same signal can remove event listeners.