21 · Interview prep
DSA for frontend
The specific algorithmic slice frontend loops care about.
Yes, frontend interviews have a DSA round — but it's a specific slice. You rarely need dynamic programming on trees; you very often need arrays, strings, hashmaps, recursion, and trees (the DOM is a tree!). This section is that focused slice, plus the "frontend-flavored" algorithm problems companies actually ask.
🎯 How DSA shows up in frontend loops
- Phone screens — one array/string/hashmap problem, often with a UI twist.
- Coding rounds — a DSA problem or a "frontend DSA" problem (flatten, DOM traversal, LRU).
- Machine coding — DSA hides inside components (tree render, virtualization math, debounce).
📖 Best practice hubs: NeetCode 150 ⭐ · BFE.dev (frontend-flavored) ⭐ · GreatFrontEnd coding · LeetCode patterns
📏 Complexity first
| Topic | Difficulty | Time | Tags | Best Resource |
|---|---|---|---|---|
| Big-O notation (time & space) | 🟢 | 45m | #complexity |
Big-O cheat sheet ⭐ |
| Analyzing loops & recursion | 🟡 | 45m | #complexity |
NeetCode ⭐ |
| Amortized analysis (dynamic arrays) | 🟡 | 30m | #complexity |
MDN: arrays |
🧱 Core data structures
| Topic | Difficulty | Time | Tags | Best Resource |
|---|---|---|---|---|
| Arrays & string manipulation | 🟢 | 1h | #arrays #strings |
NeetCode: arrays ⭐ |
| Hash maps & sets | 🟢 | 1h | #hashmap |
MDN: Map/Set ⭐ |
| Stacks & queues | 🟢 | 45m | #stack #queue |
NeetCode: stack ⭐ |
| Linked lists | 🟡 | 1h | #linked-list |
NeetCode ⭐ |
| Trees & binary trees | 🟡 | 1.5h | #trees |
NeetCode: trees ⭐ |
| Tries (autocomplete!) | 🔴 | 1h | #trie #search |
NeetCode ⭐ |
| Heaps / priority queues | 🔴 | 1h | #heap |
NeetCode ⭐ |
| Graphs (BFS/DFS basics) | 🔴 | 1.5h | #graphs |
NeetCode: graphs ⭐ |
🔁 Patterns you must know
| Pattern | Difficulty | Time | Tags | Best Resource |
|---|---|---|---|---|
| Two pointers | 🟡 | 45m | #two-pointers |
NeetCode ⭐ |
| Sliding window | 🟡 | 1h | #sliding-window |
NeetCode ⭐ |
| Prefix sum | 🟡 | 45m | #prefix-sum |
LeetCode patterns ⭐ |
| Recursion & backtracking | 🔴 | 1.5h | #recursion |
NeetCode ⭐ |
| BFS / DFS traversal | 🔴 | 1h | #traversal |
NeetCode ⭐ |
| Binary search | 🟡 | 45m | #binary-search |
NeetCode ⭐ |
| Sorting (and custom comparators) | 🟡 | 45m | #sorting |
MDN: sort ⭐ |
| Intervals (merge/overlap) | 🟡 | 45m | #intervals |
NeetCode ⭐ |
| Dynamic programming (intro) | 🔴 | 2h | #dp |
NeetCode: DP ⭐ |
⭐ Frontend-flavored DSA problems
The DSA problems that show up specifically in frontend interviews — data structures applied to real UI/JS work. High-signal; practice these first.
| Problem | Difficulty | Time | Tags | Resource |
|---|---|---|---|---|
| Flatten a nested array | 🟡 | 30m | #recursion #arrays |
BFE.dev ⭐ |
| Flatten a deeply nested object | 🟡 | 45m | #recursion #objects |
BFE.dev |
| Deep clone (handle cycles) | 🟡 | 45m | #recursion #objects |
structuredClone |
Deep equal / isEqual |
🟡 | 45m | #recursion |
BFE.dev |
| DOM tree traversal (BFS/DFS) | 🟡 | 45m | #trees #dom |
MDN: TreeWalker |
getElementsByClassName / querySelector polyfill |
🔴 | 1h | #dom #trees |
BFE.dev |
| Find element's path / LCA in the DOM | 🔴 | 1h | #trees #dom |
BFE.dev |
| Render a tree (nested comments/menu) | 🟡 | 45m | #recursion #trees |
Nested comments flagship |
| Build a tree from a flat list (parentId) | 🟡 | 45m | #trees |
State normalization |
| LRU cache | 🔴 | 45m | #hashmap #linked-list |
BFE.dev ⭐ |
Implement JSON.stringify |
🔴 | 1h | #recursion #strings |
BFE.dev |
Implement JSON.parse (tokenizer) |
🔴 | 1.5h | #parsing |
BFE.dev |
| Virtual DOM diff | 🔴 | 1.5h | #trees #react |
Build your own |
| Group anagrams / frequency count | 🟢 | 30m | #hashmap #strings |
NeetCode |
| Debounce / throttle | 🟡 | 30m | #queue #timing |
JS flagship |
| Event emitter (pub/sub) | 🟡 | 30m | #hashmap #patterns |
Observer flagship |
| Promise pool / task scheduler | 🔴 | 45m | #queue #async |
BFE.dev |
| Rate limiter / token bucket | 🔴 | 45m | #queue #timing |
BFE.dev |
| Memoize with cache key | 🟡 | 30m | #hashmap |
BFE.dev |
| Search/filter a large list (trie/index) | 🔴 | 1h | #trie #search |
Autocomplete flagship |
| Merge intervals (calendar events) | 🟡 | 45m | #intervals |
NeetCode |
| Undo/redo stack | 🟡 | 45m | #stack |
Command pattern |
🗺️ Suggested order
- Complexity → know how to reason about Big-O.
- Arrays, strings, hashmaps → 80% of phone-screen problems.
- Recursion + trees → the frontend sweet spot (DOM, nested data).
- Frontend-flavored problems above → the highest-signal practice.
- Two pointers, sliding window, binary search → common mediums.
- Graphs, heaps, DP → only if targeting Staff / heavy-DSA companies.
Related: 03-javascript · 16-machine-coding · 19-build-your-own
Know a frontend-flavored DSA problem we're missing? Add it.