Frontend Interview Questions & Practice Problems
Browse the full collection of frontend coding challenges, system design problems and JavaScript practice exercises. Every entry links to a full write-up with an explanation, a worked solution and a runnable demo.
Looking for long-form articles and deep notes? Those live on the blog.
JavaScript
45 entries
- JS Output Challenges
Test your JavaScript skills by predicting console output for tricky code snippets. Covers hoisting, closures, this binding, async operations, and event loop quiz questions.
By Pratik Rai ·
Tricky · Event Loop · Closures
- Debounce
Master the debounce technique in JavaScript to control function execution frequency. Essential for optimizing search inputs, resize handlers, and preventing excessive API calls.
By Pratik Rai ·
Easy · Utilities · Logic
- Recursive Object Evaluation
Implement a function that recursively traverses an object, evaluates functions with given arguments, and transforms keys to lowercase. Master recursive object traversal and type checking.
By Pratik Rai ·
Medium · Objects · Algorithms
- Get smart in javascript
Level up your JavaScript expertise with advanced tips, tricks, and gotchas. Master closures, hoisting, coercion, and event loop behavior to write cleaner, bug-free code.
By Pratik Rai ·
Tricky · Event Loop · Closures · JavaScript
- Promise Output Challenges
Challenge yourself with Promise output quiz questions. Test your understanding of async execution order, resolve/reject behavior, microtasks, and the JavaScript event loop.
By Pratik Rai ·
Tricky · Event Loop · Promises
- JavaScript Basics and Language Fundamentals
Deep dive into JavaScript internals: primitive vs reference types, memory allocation, hoisting mechanics, type coercion rules, and scope chains explained with practical examples.
By Pratik Rai ·
JavaScript · Fundamentals · Types · Hoisting
- Fetch And Retry
Implement a retry function that handles transient failures by retrying async operations with optional delays.
By Pratik Rai ·
Medium · Promises · Async
- Promise.all Polyfill
Implement your own Promise.all polyfill to understand how concurrent Promise handling works under the hood.
By Pratik Rai ·
Medium · Promises · Polyfill · Concurrency
- Function.prototype.call Polyfill
Implement a Function.prototype.call polyfill from scratch. Master JavaScript this binding, execution context, primitive boxing, and safe property assignment techniques.
By Pratik Rai ·
Medium · this binding · Polyfill · Functions
- Parallel vs Sequential Promises
Implement two async functions A and B, then return their sum using both sequential and parallel Promise execution, observing the time difference.
By Pratik Rai ·
Easy · Promises · Async/Await
- Flatten Nested Array in JavaScript
Implement a function to flatten a nested array in JavaScript.
By Pratik Rai ·
Medium · Arrays · Recursion
- JS Object Transformations Drill
Practice the object transformation patterns interviewers love — group by, flatten, invert, pick, omit, deep merge, and more. 15 quick drills with instant feedback.
By Pratik Rai ·
Objects · Drills · Interview Prep · Transformations
- Array.prototype.map Polyfill
Implement Array.prototype.map from scratch. Master callback signatures, thisArg binding, and sparse-array hole preservation.
By Pratik Rai ·
Easy · Arrays · Polyfill
- Array.prototype.filter Polyfill
Implement Array.prototype.filter from scratch. The key detail: push the original element, not the boolean result of the predicate.
By Pratik Rai ·
Easy · Arrays · Polyfill
- Array.prototype.reduce Polyfill
Implement Array.prototype.reduce from scratch, including the tricky no-initial-value path and the empty-array error case.
By Pratik Rai ·
Medium · Arrays · Polyfill
- Function.prototype.apply Polyfill
Implement Function.prototype.apply from scratch — identical to call except arguments arrive as a single array.
By Pratik Rai ·
Medium · Functions · Polyfill · this binding
- Function.prototype.bind Polyfill
Implement Function.prototype.bind from scratch, including partial application and the new-operator edge case that almost nobody gets right.
By Pratik Rai ·
Hard · Functions · Polyfill · this binding
- Throttle Polyfill
Implement throttle from scratch: guarantee a function runs at most once per interval regardless of how often it is called.
By Pratik Rai ·
Easy · Utilities · Polyfill
- Array.prototype.flat Polyfill
Implement Array.prototype.flat from scratch with a configurable depth. Default depth is 1, not Infinity.
By Pratik Rai ·
Easy · Arrays · Polyfill
- Curry Polyfill
Implement a curry function that transforms a multi-argument function into a chain of single (or partial) calls using fn.length.
By Pratik Rai ·
Medium · Functional · Polyfill
- Promise.allSettled / race / any Polyfills
Implement the three Promise utility variants: allSettled (never rejects), race (first to settle wins), and any (first to resolve wins).
By Pratik Rai ·
Medium · Promises · Polyfill
- Object.assign Polyfill
Implement Object.assign from scratch: copy own enumerable properties (including Symbols) from sources onto the target.
By Pratik Rai ·
Medium · Objects · Polyfill
- Object.create Polyfill
Implement Object.create using the classic empty-constructor trick to set an object's prototype chain.
By Pratik Rai ·
Medium · Objects · Prototypes · Polyfill
- EventEmitter Polyfill
Implement a pub/sub EventEmitter class with on, off, emit, and once — the pattern behind Node's events module.
By Pratik Rai ·
Medium · Design Patterns · Polyfill
- Promise Pool
Run a list of async tasks with a hard limit on how many are in flight at once — the concurrency control Promise.all does not give you.
By Pratik Rai ·
Medium · Promises · Concurrency · Async
- Promise Time Limit
Wrap an async function so it gives up after a deadline — the building block behind every request timeout.
By Pratik Rai ·
Medium · Promises · Async · Timers
- Cache With Time Limit
A key/value cache where every entry expires on its own timer — and setting a key again restarts its clock.
By Pratik Rai ·
Medium · Classes · Timers · Data Structures
- Promisify a Callback Function
Convert a Node-style (error, value) callback API into one that returns a promise.
By Pratik Rai ·
Medium · Promises · Async · Higher-Order Functions
- Resolve Promises Sequentially
Run promises one after another and collect the results in order — built with .then chaining, no async/await.
By Pratik Rai ·
Medium · Promises · Async · Interview Question
- Cancellable Promise
Give the caller a way to stop waiting on a promise — the pattern behind cancelling a request when a component unmounts.
By Pratik Rai ·
Medium · Promises · Async · Cancellation
- Query Batching
Collapse many individual lookups made in the same tick into one request, then hand each caller its own result.
By Pratik Rai ·
Hard · Promises · Performance · Async
- Memoize
Cache a function by its arguments so the same call never computes twice.
By Pratik Rai ·
Medium · Closures · Higher-Order Functions · Performance
- Function Composition
Fold an array of functions into one, applied right to left.
By Pratik Rai ·
Easy · Higher-Order Functions · Functional
- Allow One Function Call
A once wrapper: the first call runs, every call after it does nothing.
By Pratik Rai ·
Easy · Closures · Higher-Order Functions
- Infinite Curried Sum
sum(1)(2)(3) with no fixed arity — the running total appears when the result is coerced.
By Pratik Rai ·
Medium · Closures · Currying · Coercion
- Array Wrapper
A class that decides what it means to add two of its instances, or print one.
By Pratik Rai ·
Easy · Classes · Coercion
- Deep Equality
Compare two values structurally, because === only ever compares references.
By Pratik Rai ·
Medium · Objects · Recursion · Comparison
- Deep Clone
Copy a nested structure so nothing is shared — including the cases that break a naive recursion.
By Pratik Rai ·
Medium · Objects · Recursion · Immutability
- Make Object Immutable
Freeze an object all the way down, because Object.freeze only handles the top level.
By Pratik Rai ·
Medium · Objects · Immutability · Recursion
- Array.prototype.groupBy
Group an array into buckets by a key function — now a real language feature as Object.groupBy.
By Pratik Rai ·
Medium · Polyfill · Arrays · Objects
- Chunk Array
Split an array into groups of a fixed size, with whatever is left over in a shorter final group.
By Pratik Rai ·
Easy · Arrays
- Flatten an Array Without Recursion
The same result as the recursive flatten, with your own stack instead of the call stack.
By Pratik Rai ·
Medium · Arrays · Stack · Interview Question
- Flat List to Tree
Turn a flat array of nodes with parentId into a nested tree — the shape behind every file explorer and nested menu.
By Pratik Rai ·
Medium · Objects · Trees · Interview Question
- Nested Array Generator
Yield every value in a nested array one at a time, so an enormous structure is never flattened into memory.
By Pratik Rai ·
Medium · Generators · Iterators · Arrays
- LRU Cache
A fixed-size cache that evicts whatever was used least recently — and does both reads and writes in constant time.
By Pratik Rai ·
Medium · Data Structures · Caching · Design
React
21 entries
- Nested Comments System
Build a Reddit-style nested comments system in React using recursion. Learn tree data structures, efficient state management, and how to render deeply threaded replies.
By Pratik Rai ·
Medium · Recursion · Data Structures
- Modal Component
Build an accessible modal dialog component in React with focus trapping, keyboard navigation, backdrop click handling, and portal rendering. A common frontend interview question.
By Pratik Rai ·
React · Modal Component
- Image Carousel
Create an interactive image carousel in React with smooth slide transitions, navigation arrows, dot indicators, autoplay, and touch/swipe support for mobile devices.
By Pratik Rai ·
Medium · Image Carousel · React
- Dynamic Tic Tac Toe
Build a dynamic Tic Tac Toe game in React with customizable grid sizes, win detection algorithms, player turn management, and game reset functionality. Great for interviews.
By Pratik Rai ·
Medium · Tic Tac Toe · React
- Dice Roller
Create an animated dice roller component in React with realistic rolling animations, random number generation, multiple dice support, and roll history tracking.
By Pratik Rai ·
Medium · Dice Roller · React
- Whack A Mole
Build a fun Whack-a-Mole game in React with random mole spawning, click detection, score tracking, countdown timer, and increasing difficulty levels. Perfect for React practice.
By Pratik Rai ·
Medium · Whack A Mole · React · Game · Whack-a-mole-for-frontend
- Memory Game
Create a card-matching memory game in React with flip animations, pair detection logic, move counter, timer, and win condition handling. A classic frontend coding challenge.
By Pratik Rai ·
Medium · Memory Game · React · Game
- Infinite Scrolling
Implement infinite scrolling in React using Intersection Observer API. Learn lazy loading, pagination, scroll position restoration, and performance optimization techniques.
By Pratik Rai ·
Medium · Infinite Scroll · React · List
- Simon Says
Build the classic Simon Says memory game in React with color sequence generation, player input validation, sound effects, increasing difficulty, and high score tracking.
By Pratik Rai ·
Medium · Simon Says · React · Game
- Accordion
Learn to build an accessible accordion component in React with smooth animations, keyboard navigation, and single or multi-expand modes. Perfect for FAQs and collapsible UI sections.
By Pratik Rai ·
Medium · Accordion · React
- Debounce with search
Implement a debounce function with a search input. The debounce function should delay the execution of the search function until the user stops typing for 500ms.
By Pratik Rai ·
React · Debounce · Search
- Sequential Progress Bars
Clicking Add appends a progress bar, and the bars fill strictly one at a time. A queueing problem disguised as an animation.
By Pratik Rai ·
Medium · Timers · State · React
- File Explorer
Build a nested folder tree from nothing — expand, collapse, and add files and folders at any depth.
By Pratik Rai ·
Medium · Recursion · Trees · State · React
- Pagination With Ellipsis
A pagination control that always shows the first, last and current pages, collapsing every gap into a single ellipsis.
By Pratik Rai ·
Medium · Algorithms · Components · React
- Nested Tabs From a Flat Array
Given a flat array of items with parentId, render them as nested tabs at arbitrary depth.
By Pratik Rai ·
Medium · Recursion · Trees · Components · React
- Accessible Dropdown
A select built from scratch — keyboard navigation, focus management, outside-click and the full ARIA listbox contract.
By Pratik Rai ·
Medium · Accessibility · Keyboard · Components · React
- To-Do With Filter Tabs
A task list with In progress, Completed and Deleted tabs — where deletion cannot mean removal.
By Pratik Rai ·
Easy · State · Components · React
- Seat Booking Grid
A cinema seat picker: rows at different prices, sold seats, a selection limit and a running total.
By Pratik Rai ·
Medium · State · Components · React
- Interdependent Inputs With Rollback
Four fields that constrain each other, where an invalid edit rolls back to its parent value instead of being clamped.
By Pratik Rai ·
Hard · Forms · State · Validation · React
- Virtualized List
Ten thousand rows with only the visible window in the DOM, and a scrollbar that still behaves.
By Pratik Rai ·
Hard · Performance · Rendering · React
- Typeahead With Keyboard Navigation
Search-as-you-type with debouncing, request cancellation, arrow-key navigation and the combobox roles.
By Pratik Rai ·
Medium · Async · Keyboard · Accessibility · React
Browse by interview topic
Every challenge below has a written solution and a runnable editor. Long-form articles live on the blog.
JavaScript polyfill interview questions13
Rebuilding a method the language already ships is a standard way to test whether you know what it actually guarantees. These walk through the specification behaviour most implementations miss — argument order, sparse arrays, the optional context argument — with a runnable editor and a worked solution for each.
- Array.prototype.map Polyfill
- Array.prototype.filter Polyfill
- Array.prototype.reduce Polyfill
- Function.prototype.apply Polyfill
- Function.prototype.bind Polyfill
- Throttle Polyfill
- Array.prototype.flat Polyfill
- Curry Polyfill
- Promise.allSettled / race / any Polyfills
- Object.assign Polyfill
- Object.create Polyfill
- EventEmitter Polyfill
- Array.prototype.groupBy
React UI machine-coding questions21
Build-a-component rounds, where the interviewer watches you make decisions about state, layout and edge cases under time pressure. Each one includes a live demo, the full source, and a write-up covering the follow-ups that usually arrive once the basic version works.
- Nested Comments System
- Modal Component
- Image Carousel
- Dynamic Tic Tac Toe
- Dice Roller
- Whack A Mole
- Memory Game
- Infinite Scrolling
- Simon Says
- Accordion
- Debounce with search
- Sequential Progress Bars
- File Explorer
- Pagination With Ellipsis
- Nested Tabs From a Flat Array
- Accessible Dropdown
- To-Do With Filter Tabs
- Seat Booking Grid
- Interdependent Inputs With Rollback
- Virtualized List
- Typeahead With Keyboard Navigation
JavaScript practice problems27
Utility functions and async patterns that come up again and again in front-end screens: debouncing, throttling, retries, and the difference between running work in parallel and in sequence.
- Debounce
- Recursive Object Evaluation
- Fetch And Retry
- Promise.all Polyfill
- Function.prototype.call Polyfill
- Parallel vs Sequential Promises
- Flatten Nested Array in JavaScript
- Promise Pool
- Promise Time Limit
- Cache With Time Limit
- Promisify a Callback Function
- Resolve Promises Sequentially
- Cancellable Promise
- Query Batching
- Memoize
- Function Composition
- Allow One Function Call
- Infinite Curried Sum
- Array Wrapper
- Deep Equality
- Deep Clone
- Make Object Immutable
- Chunk Array
- Flatten an Array Without Recursion
- Flat List to Tree
- Nested Array Generator
- LRU Cache
JavaScript deep dives2
Longer explanations of the language mechanics the questions above rely on, for when the goal is understanding the model rather than finishing a task.