FrontendAtlas Essential 60

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.

Implement a function `promiseAll(promises)` that behaves like `Promise.all`. It should take an array of values or promises and return a single promise that resolves to an array of results, preserving order, or rejects a…

Implement a function `throttle(fn, interval)` that ensures `fn` is executed at most once during every `interval` milliseconds, no matter how many times it's triggered. In this exercise we use a leading-only throttle: th…

Create a deep clone of an object/array so nested structures are copied by value. Discuss limits (functions, dates, cycles) and choose a strategy that matches constraints, such as recursion with a map to handle circular…

Implement a concurrency-limited async map that preserves order. Run at most N promises at a time, resolve results in input order, and reject early on errors to avoid hanging work.

Implement a function `deepEqual(a, b)` that returns `true` when two values are deeply equal — primitives by value and objects/arrays by recursively comparing their properties. Handle Dates, RegExps, and `NaN`.

Implement memoize(fn) that caches results for repeated calls. Choose a cache key strategy, discuss memory growth/eviction, and clarify that memoization is safe mainly for pure functions with stable outputs.

Implement fetchJson(url, options) that fetches JSON with built-in timeout and abort support. It should abort on timeout, respect an external AbortSignal, and throw on non-2xx HTTP responses. This mirrors real-world clie…

Implement takeLatest(fn) that wraps an async function and guarantees only the most recent call can resolve. Each new call aborts the previous one via AbortController, and stale results must not update state. This preven…

Recreate the native `.map()` method **without using it**. Your `myMap` must call `callbackFn(value, index, array)` for each **existing** index, bind `thisArg`, and return a new array with the **same length** where holes…

Recreate the native `.reduce()` method **without using it**. Your `myReduce` must call the reducer with `(accumulator, currentValue, index, array)` only for existing indices, handle an optional `initialValue`, and retur…

Implement `get(obj, path, defaultValue)` where `path` is a string like `user.profile.name` or `a[0].b`. Return `defaultValue` when the path does not exist.

Implement `myBind(fn, thisArg, ...boundArgs)` that behaves like `Function.prototype.bind`. It must: 1) Bind `this` to `thisArg` for normal calls. 2) Support partial application (pre-filling arguments). 3) Work with `new…

Group an array of items by a key (function or property). Build an object or Map where each key maps to an array of items, and preserve input order inside each group. Concepts: arrays, grouping, objects.

Implement a myNew helper that mimics the new operator. Create an object linked to the constructor prototype, call the constructor with this, and return the constructor’s object result if provided. This tests prototype l…

Build a tiny event emitter with on, off, and emit. Store listeners per event, allow multiple listeners, and ensure off removes only the specified handler without breaking others. This tests data structures and event flo…

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…

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…

Recreate the native `Array.prototype.filter()` method as `myFilter`. It should call a provided callback once for each existing element in the array, include the element in the new array if the callback returns a truthy…

Implement sanitizeHrefUrl(input) to safely use user-provided URLs in an <a href="...">. Use an allowlist for safe schemes (http/https/mailto/tel) and safe relative URLs, and block dangerous schemes like javascript: or d…

Implement promiseAny(promises) that behaves like Promise.any. It should resolve with the first fulfilled value, ignoring rejections until all inputs reject. If everything rejects (or the input is empty), it should rejec…

Implement curry(fn) to transform a multi-argument function into chained calls. Collect arguments across invocations, allow partial application, and invoke the original function once enough args have been provided. Conce…

Design a global toast/alert system that can be triggered from anywhere in the app (e.g. `toast.success()`, `toast.error()`). Focus on global state, rendering through a portal, stacking multiple toasts, auto-dismiss timers, and accessible behavior. Key considerations include: how to expose a simple global API, how to manage timers and cleanup safely, how to handle z-index and stacking order, and how to support responsive placements (top-right, bottom-left, mobile full-width) with good ARIA roles and focus handling.

Design an infinite-scroll list with paginated loading, error recovery, and virtualization strategy so scrolling stays fast while DOM size remains bounded.

Design a real-time search module where results update as the user types, focusing only on the frontend side: state management, debouncing, and caching. Assume there is some abstract async search function in the background, but your job is to design how the input, debounced calls, cache, and UI states work. Key considerations include: choosing debounce (and explaining why) vs throttle, maintaining a client-side cache of query → results so repeated queries are instant, simulating cancellation of outdated requests (ignoring late responses), handling slow typing vs fast typing without flicker or stale results, and designing UX states for empty query, loading, no results, and error.

Design a social news feed/timeline UI with pagination, virtualization, media lazy-loading, realtime updates, and smooth interactions.

Design a 4-step form with validation, step transitions, a progress bar, and automatic autosave to localStorage. Users should be able to refresh or leave the page and continue where they left off. Key considerations include form architecture, throttled/debounced autosave, inline vs submit validation, dirty-state tracking, and restoring from saved drafts.

Design a component-based design system for a mid-to-large scale product: buttons, inputs, tabs, banners, dialogs, and more. Focus on how the system is structured, how teams consume it, and how it evolves safely over time. Key considerations include: token-driven theming (semantic tokens, color scales, dark/high-contrast variants), CSS architecture decisions (CSS variables, utility classes, BEM, or Tailwind-style tokens), accessibility-first component APIs (keyboard behavior, ARIA attributes, focus management), and support for dark mode, high contrast, and RTL from day one. You should be prepared to talk about: consistent component APIs (props, events, slots), how to ensure long-term maintainability, versioning and breaking-change strategy, tree-shaking-friendly structure, and bundle-size optimizations like dynamic imports and granular code splitting.

Design a minimal ChatGPT-like experience in a text area: the user submits a prompt, the assistant streams a response, and the conversation is persisted for resume. Include frontend architecture plus database considerations for storing chat history.

Given a UI mock, describe the component tree, state ownership, and data flow while keeping the UI scalable and maintainable.

JavaScript runs on a single thread, but the real production pitfall is queue ordering: synchronous work runs first, then microtasks drain before the next macrotask, which is why long Promise chains can starve rendering…

Closures keep outer variables alive after the outer function returns. The real frontend debug value is explaining stale async callbacks, loop-capture bugs, and long-lived listeners that keep old objects alive in memory.

Promises and async/await use the same async model, but production decisions are really about concurrency, stale-request cancellation, request identity, and error boundaries rather than syntax alone.

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…

prototype is a property on constructor functions that becomes the [[Prototype]] of instances created with new. __proto__ is the (legacy) accessor for an object's [[Prototype]] link used for property lookup. Mastering th…

Mutable data can be changed in place, while immutable data is never modified — instead, new copies are created. Understanding this difference is critical for predictable state management in React, Angular, Redux/NgRx, a…

Web performance optimization is a prioritization problem across network transfer, render-blocking work, images, JavaScript, and caching. Strong answers tie improvements to critical-path debugging, first-visit vs repeat-…

Security-focused frontend interview guide to DOM XSS: attacker-controlled sources like location.hash or postMessage, dangerous DOM sinks, safe rendering patterns, URL validation, and defense in depth with CSP and Truste…

Explain useEffect as React’s external sync point through cleanup, dependency discipline, stale-closure debugging, and the common mistake of putting pure derived logic into effects.

Keys are React's identity contract for list items. Use stable keys to prevent reordered rows, lost input state, random remounts, and production bugs where React preserves the wrong component.

Angular change detection strategy is a production performance and debugging choice, not just a framework definition. The useful answer compares Default versus OnPush through stale-UI bugs, trigger rules, immutable updat…

Explain the real difference between ref() and reactive() in Vue 3’s Composition API, when each is the better choice (primitives vs objects, replacement vs mutation, destructuring, template unwrapping), and the most comm…

Use a production accessibility review workflow: semantics first, then keyboard and focus, labels and errors, contrast, manual assistive-tech checks, and automated tooling. The real mistake is treating Lighthouse or axe…

CSS Grid and Flexbox are both powerful layout systems designed to help developers create complex, responsive layouts with ease. While Flexbox excels in one-dimensional layouts (either rows or columns), Grid is built for…