DSA for frontend — must-know
The algorithmic warm-up senior FE rounds still include.
No backend-shaped graphs or DP, just the problem shapes that actually get asked in a frontend round: array transforms, promise control flow, closures, deep-equal, event emitters. 20 problems — do one or two a day for a month.
20 items · ~4h of focused work
Arrays & objects
- Chunk an array into fixed-size piecesSplit a flat list into rows of N — the maths behind every grid layout, batched request, and carousel page.easy
- Array Flattening with DepthFlatten a nested array structure up to a specified maximum depth parameter.easy
- Build your own groupByTurn a flat array of records into an object keyed by whatever field you choose — the utility you end up rewriting on every project.easy
- Compare two objects properlyWhy does `{a:1} === {a:1}` return false? Write the deep comparison that answers what you actually meant.medium
- Deep clone a nested structureCopy a nested object so that editing the copy never touches the original — including when the object refers to itself.hard
Functions & closures
- Write debounce from scratchStop a function firing on every keystroke. The classic interview question, and the thing that makes search boxes usable.medium
- Implement Throttle Rate LimiterEnsure a function is executed at most once per specified time interval.medium
- Curry a function of fixed arityTurn `f(a, b, c)` into `f(a)(b)(c)` so you can bake in the first argument now and supply the rest later.medium
- Function Memoization CacheCreate a memoized wrapper function that caches return values based on argument inputs.medium
- Run a function only onceWrap a function so it runs on the first call and never again — the guard you reach for around analytics init and one-time setup.easy
Async & promises
- Re-implement Promise.all from ScratchExecute an array of promises concurrently and resolve with an array of all fulfilled values.hard
- Implement Promise.race from scratchSettle as soon as the first of several promises settles — the primitive behind every timeout and every fastest-mirror wins fetch.medium
- Implement Promise.any from scratchTake the first success and only give up when every single attempt has failed — how you fall back across mirrors.medium
- Implement Promise.allSettled from scratchWait for every request to finish and report each outcome, instead of losing the successes to the first failure.medium
- Retry a request with backoffFlaky networks are normal. Retry a failing promise a few times, waiting longer after each attempt.hard
Data structures
DOM
- Serialise a DOM-like tree to HTMLRender a plain-object element tree into an HTML string, getting attribute escaping, boolean attributes and void elements right.hard
- Find a node by id in a DOM-like treeWalk a plain-object element tree the way `getElementById` does, and report where you found the node.medium
- Replay event delegation up an ancestor chainGiven the path from an event target to the root, work out which delegated handlers fire, in what order, and where stopPropagation cuts it off.hard