Frontend Interview Questions for Quick Prep

Critical for coding rounds and edge-case discussion.

Implement uniqueArray(arr) that removes duplicates while preserving order. Use a Set for O(n) time and clarify how to treat objects by reference, NaN, and mixed types so behavior is explicit and predictable. Concepts: a…

Critical for coding rounds and edge-case discussion.

Create a shallow copy of an array or object. Copy top-level properties but keep nested references intact, and document that limitation clearly. This clarifies the difference between shallow and deep cloning and helps av…

Critical for coding rounds and edge-case discussion.

Implement sleep(ms) that returns a Promise resolving after ms milliseconds. Use it to pause async flows like retries, exponential backoff, UI delays, or test helpers without blocking the event loop or freezing the UI th…

Critical for coding rounds and edge-case discussion.

Implement a function `sortNumbers(arr, ascending = true)` that returns a **new array** of numbers sorted numerically in ascending or descending order. The original array must not be mutated, and you should use `Array.pr…

Critical for coding rounds and edge-case discussion.

Return a new array with one index updated, leaving the original array untouched. This is the core immutable update pattern used in reducers, React state updates, and UI list editing, and it prevents accidental mutation.

Critical for coding rounds and edge-case discussion.

Implement createDeferred() to build a controllable Promise: { promise, resolve, reject }. This is a common testing tool to make async flows deterministic (you decide exactly when something resolves/rejects).

Critical for coding rounds and edge-case discussion.

Implement createSpy(impl?) to produce a callable spy that records every call (args + this) and optionally delegates to an implementation. Spies are a core unit-testing tool to verify behavior at boundaries (network, sto…

Critical for coding rounds and edge-case discussion.

Build a timer registry with mySetTimeout, myClearTimeout, and myClearAllTimeouts. Return your own numeric ids, store native handles, and clean up on fire. Complexity: O(1) set/clear, O(k) for clearAll.

Critical for coding rounds and edge-case discussion.

Implement `getByPath(obj, path, fallback?)` that safely reads a nested value from an object. This is extremely common in frontend screens (reading deep API responses, feature flags, form state) and shows up often in int…

Critical for coding rounds and edge-case discussion.

Implement setByPath(obj, path, value) that returns a new object/array tree with the value written at the nested path. Normalize dot or segment paths, create missing containers based on numeric segments, and never mutate…

Critical for coding rounds and edge-case discussion.

Implement debounce(fn, wait) that delays execution until the user stops triggering events. Clear the previous timer on each call, preserve this/args, and make the timing predictable for search/resize use cases.

Critical for coding rounds and edge-case discussion.

Implement `delegate(root, eventType, selector, handler)` for **event delegation**. Requirements: 1) Attach **one** event listener to `root`. 2) When an event fires, if `event.target` (or one of its ancestors up to `root…

Frequently tested in explanation-heavy rounds.

Callbacks are the original control-flow hook in JavaScript. The production issues are inversion of control, callback hell, and debugging legacy async code that cannot cancel or compose cleanly.

Frequently tested in explanation-heavy rounds.

Arrow and regular functions look similar but behave differently for this binding, constructors, arguments, and method design. Strong answers explain lexical vs dynamic this, prototype/new behavior, and when each style i…

Frequently tested in explanation-heavy rounds.

Debug the production bug where async requests resolve out of order and overwrite newer UI state. The fix is cancellation, request identity, or takeLatest-style guards that stop stale results from winning.

Frequently tested in explanation-heavy rounds.

Security-focused frontend interview guide to DOM XSS: attacker-controlled sources, dangerous DOM sinks, safe rendering patterns, URL/protocol validation, and defense in depth with CSP and Trusted Types.

Frequently tested in explanation-heavy rounds.

Hoisting is JavaScript declaration processing before execution. The practical debug value is mapping symptoms: `undefined` reads, early callable function declarations, and ReferenceError or TypeError when the wrong cons…

Frequently tested in explanation-heavy rounds.

Closures keep outer variables alive after the outer function returns. That powers private state, but the production pitfalls are loop-capture bugs, stale async state, and memory retention when callbacks keep old data al…

Frequently tested in explanation-heavy rounds.

Event delegation uses one ancestor listener instead of many child listeners. The production value is handling dynamic DOM, nested targets, stopPropagation surprises, and list performance without attaching handlers every…

Frequently tested in explanation-heavy rounds.

Hoisting and TDZ explain why `let` and `const` are registered before execution yet still throw before initialization. The common debug signal is `ReferenceError: Cannot access X before initialization`.

Frequently tested in explanation-heavy rounds.

The value of `this` depends on call site, strict mode, and arrow functions. The real debug problem is detached methods, callback context loss, and object methods that stop pointing at the receiver you expected.

Frequently tested in explanation-heavy rounds.

var, let, and const are all hoisted, but they differ in initialization and access-before-declaration behavior. var initializes to undefined; let/const stay in TDZ until declaration executes.

Frequently tested in explanation-heavy rounds.

This question checks if you can reason about performance across the network, render pipeline, assets, and runtime. Interviewers expect concrete tactics like caching, compression, code splitting, and image optimization.

Frequently tested in explanation-heavy rounds.

Callback hell happens when async callbacks are deeply nested and error handling is duplicated. Promises flatten async control flow, centralize failures with catch, and make sequencing and parallel execution easier to re…