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.

A callback is a function passed as an argument to another function to be executed later, often after a task is completed. Covers: async, callbacks, event loop, functions, higher order functions.

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.

When multiple async requests are in flight, they can resolve out of order and overwrite newer UI state. Explain why this happens and how to prevent stale updates with cancellation or guards.

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. Declarations are known earlier than the line they appear on, but initialization timing differs by construct.

Frequently tested in explanation-heavy rounds.

A closure happens when a function keeps access to variables from its outer scope, even after that outer function has finished. It’s how JavaScript allows private data and persistent state inside functions.

Frequently tested in explanation-heavy rounds.

Event delegation is a technique where a single event listener on a parent element handles events for multiple child elements by using event bubbling and checking the event target. Edge cases include stopPropagation and…

Frequently tested in explanation-heavy rounds.

Hoisting means declarations are processed before execution. TDZ means let/const exist but cannot be accessed before their declaration line, which throws ReferenceError.

Frequently tested in explanation-heavy rounds.

The value of `this` in JavaScript depends on how a function is called — not where it’s defined. It can refer to the global object, a specific object, or be `undefined` in strict mode or arrow functions. The value of thi…

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…