Frontend Developer interview questions

The event loop drains the whole microtask queue after each macrotask, before the next render.

• Microtasks: Promises, queueMicrotask, MutationObserver; they all run before rendering.
• Macrotasks: setTimeout, setInterval, I/O; setTimeout(..., 0) yields to the render cycle.
• Long .then() chains can starve rendering and freeze the UI.
• Knowing the order lets you predict execution and avoid jank.

A closure is a function that keeps access to variables from its enclosing scope after that scope has finished.

• It captures the outer variables by reference, not by copy.
• Classic example: a makeCounter factory returning increment and decrement that share one private count.
• It powers the module pattern and memoization helpers.

All three set a function's this explicitly, but differ in how and when they invoke it.

• call: invokes immediately, arguments passed individually.
• apply: invokes immediately, arguments passed as an array.
• bind: returns a new function with this permanently bound, without calling it.
• bind is common for passing class methods as callbacks without losing context.

Every object links to another via [[Prototype]], forming a chain that ends at Object.prototype.

• Property lookups walk the chain until the property is found or the chain ends.
• ES6 class syntax is sugar over the same prototype-based inheritance.
• Class methods land on the constructor's prototype, not on each instance.

They differ in when they settle and how they treat rejections.

• Promise.all: resolves when all resolve, rejects on the first rejection.
• Promise.allSettled: waits for all to settle, returns status objects regardless of outcome.
• Promise.race: settles as soon as the first promise settles, resolve or reject.
• Promise.any: resolves on the first resolve, rejects only if all reject.

Reach for WeakMap or WeakSet when you want keys that the garbage collector can reclaim.

• They hold weak references, so an object is collected once no strong reference remains.
• Ideal for metadata about DOM nodes or objects without blocking garbage collection.
• They have no iteration methods, so avoid them when you need to enumerate entries.

Debounce waits for a pause; throttle caps the rate; pick by the event.

• Debounce: runs only after calls stop for a set time, ideal for search-as-you-type.
• Throttle: runs at most once per interval, ideal for scroll or resize handlers.
• Debounce on scroll feels worse than throttle because nothing fires while scrolling.

Memoization caches a pure function's result by its arguments so repeat calls return instantly.

• Implement it with a Map or a closure-held cache object.
• Main trade-off: memory grows with unique argument combinations and can leak with object keys.
• In React, useMemo and useCallback are built in but add overhead when deps change often.

Regular functions get their own this from the call site; arrow functions inherit it lexically.

• Regular: this depends on how it is called (method, constructor, call/apply, or default).
• Arrow: captures this from the enclosing scope at definition time.
• This makes arrows unreliable as object methods but ideal as callbacks inside class methods.

They differ in copy depth and what they can preserve.

• Spread: shallow copy, only top-level references are duplicated.
• JSON.parse(JSON.stringify()): deep clone, but loses functions, turns Dates into strings, drops undefined, throws on cycles.
• structuredClone: true deep clone handling Dates, typed arrays, and cycles, but not functions or DOM nodes.

async/await is syntactic sugar over Promises.

• An async function always returns a Promise.
• await pauses the function and yields to the event loop until the awaited Promise settles, then resumes.
• Babel compiles it into a state machine with generator-like semantics and .then() chains.
• Awaiting a non-Promise still works because it is wrapped in Promise.resolve().

They differ in load timing, structure, and binding semantics.

• CommonJS: require/module.exports, loaded synchronously, evaluated at runtime, mutable exports.
• ES modules: import/export, static structure analyzed at parse time, enabling tree shaking.
• ES modules are always async in browsers; Node supports both.
• ES module live bindings mean an import reflects the latest export value.

A generator uses function* and can pause with yield, returning an iterator.

• It produces values on demand instead of computing everything upfront.
• Useful for pagination in infinite scroll.
• Useful for complex async control flow in libraries like redux-saga.
• Useful for lazy sequences.

Find the leak with heap snapshots, then fix the source that keeps references alive.

• Common causes: global listeners never removed, closures holding large module-scope data, subscriptions not cleaned on unmount.
• Detect: take heap snapshots in Chrome DevTools Memory before and after navigating, compare retained sizes.
• Fix: remove listeners in cleanup functions, use WeakMap for metadata, unsubscribe from WebSocket or Observable streams on unmount.

The temporal dead zone is the gap between entering a scope and reaching a let or const declaration.

• Accessing the variable in its TDZ throws a ReferenceError even though it exists in scope.
• This differs from var, which is hoisted and initialized to undefined.
• TDZ errors show up in class field initializers and when reading a variable before its declaration.

React diffs the previous and new virtual DOM trees to decide what to re-render.

• It assumes different element types produce different trees and skips matching subtrees.
• The key prop signals element identity across renders, so a DOM node can be reused when its list position changes.
• Without correct keys, React may destroy and recreate expensive components, hurting performance and losing local state.

useCallback memoizes a function reference; useMemo memoizes a computed value.

• useCallback: keeps a stable function reference so memoized children do not re-render needlessly.
• useMemo: avoids expensive recalculations on every render.
• Use useCallback for stable props to memoized children; use useMemo for costly computations.
• Both are often overused, adding overhead when dependencies change frequently.

A controlled component is driven by React state; an uncontrolled one manages its own value via a ref.

• Controlled: value comes from state plus an onChange handler, so React is the source of truth.
• Uncontrolled: state lives in the DOM, read via inputRef.current.value.
• Controlled fits validation, conditional rendering, and multi-field sync.
• Uncontrolled is simpler for file inputs or third-party DOM libraries.

Hooks must run at the top level of a React function, in the same order every render.

• Do not call them inside loops, conditions, or nested functions.
• Call them only from React components or custom hooks, not plain JavaScript.
• React matches each hook to its state by call order; breaking the order misassigns state.

React.memo skips a component's re-render when its props are shallow-equal.

• It does not help when props are objects or functions recreated on every parent render.
• Shallow comparison sees those new references as changed.
• Pair it with useCallback and useMemo in the parent for the optimization to work.
• The comparison overhead is wasted if the component is cheap to render.