Frontend Beauty
ESC

Type to search the knowledge base.

JavaScript Interview Learning Path

A frontend-shaped path through polyfills, async orchestration, output questions, and machine coding. Checkpoints you can implement, not course trophies.

beginner6 min read
  • javascript
  • interview
  • learning-path
  • polyfills

Frontend JavaScript interviews do not grade you on how many playlists you finished. They grade a short list of skills: a polyfill that matches the spec on holes and thenables, an async helper that fails in a named way, an output trace you can justify from the event loop, and a widget you can finish in 45 minutes. This JavaScript interview learning path is the sequence we use on this site. Each stage ends when a function runs, not when a video does.

SDE1, SDE2, and SDE3 loops reuse the same four question types. The difference is how much of the spec you are expected to name, and whether you volunteer abort, concurrency caps, and the API you will not build.

Key takeaways

  • Four question types: polyfill, async orchestration, output trace, machine coding. Prepare those, not a random 200-item dump.
  • SDE1 is holes, order, and microtasks. SDE3 is cancellation, bounds, and what you skip under a clock.
  • A checkpoint is a function you can call in the console. Certificates are not checkpoints.
  • Native Promise and Array methods are the spec. Blogs that skip empty iterables and AggregateError will fail you.
  • Use this cluster with the existing Promises and event loop pages. Do not start from a course outline.

The four question types you will actually get

Type What it looks like on the board You are done when
Polyfill map, filter, reduce, Promise.all, bind, new Holes, thisArg, thenables, empty input match MDN
Async orchestration retry, timeout, series, parallel, mapLimit Fail-fast vs fail-soft is a choice you can say out loud
Output / runtime setTimeout vs then, this, closures, coercion You trace queues, not memorized printouts
Machine coding autocomplete, nested comments, todo, tabs State, a11y, and a finish line in 45-90 minutes

Those four show up in mixed rounds. A loop may open with an output question, then Promise.all, then a typeahead. Treating them as four separate sports is how people freeze on the next screen.

A polyfill is not “loop and push.” Interviewers score length plus in (not indexOf), thenable wrapping with Promise.resolve, and what [] does. The polyfill questions playbook is the rubric.

Async orchestration is policy: first rejection vs status bag, first settlement vs first success, bounded fan-out vs “start 400 fetches.” That work lives next to combinators: timeout, retry, series, parallel, mapLimit.

Output questions are event-loop literacy. If you cannot say “one macrotask, then the whole microtask queue, then maybe paint,” you will mis-order mixed then / setTimeout snippets. Read the event loop before combinators.

Machine coding is still JavaScript. A progress-bar queue is mapLimit with pixels. Autocomplete is debounce plus a stale-response guard. Start from todo or autocomplete once polyfills are not what slows you down.

// Checkpoint 0: you can say this without looking it up
Promise.resolve().then(() => console.log('microtask'));
setTimeout(() => console.log('timer'), 0);
console.log('sync');
// sync → microtask → timer

How this JavaScript interview learning path splits by level

Loops vary by role, level, and year. The table is a planning tool, not a diary of any one company.

Level Typical JS prompt Extra signal they want
SDE1 Array.map, filter, a Promise.all, a 6-line output trace Callback arity, thisArg, order of results, “empty array fulfills []”
SDE2 reduce, any / allSettled, retry, flatten TypeError on empty reduce, AggregateError, abort talk, no indexOf loops
SDE3 Custom Promise sketch, mapLimit, a widget plus API review Thenable cycle, microtask reactions, concurrency cap, “I will not cancel via race”

SDE1 fails: dense map that collapsed holes, Promise.all that pushes in completion order, filter that wrote empty slots for dropped items. SDE2 fails: Promise.race([]) assumed to reject, any written as race, reduce seeded at arr[0] on a leading hole. SDE3 fails: then running synchronously, a pool that is slice then Promise.all of batches, a timeout that leaks the timer.

Do not skip holes “because we never use sparse arrays.” The interviewer is checking whether you read the method as specified. Custom Promise is the same settlement rules as all / race, with a queue you own.

A sequence with checkpoints

Work in this order. Skip a page only if you can already implement its checkpoint from a blank editor.

  1. Runtime. Event loop, Promises, queueMicrotask vs setTimeout. Checkpoint: predict the 7-line mixed trace on the event-loop page and explain paint starvation.
  2. Array methods as spec. map, filter, reduce (concept), then the polyfills: map, filter, reduce. Checkpoint: [1, , 3] mapped, filtered, and reduced matches the engine. No indexOf.
  3. Combinators. all, allSettled, race, any, finally. Checkpoint: empty iterable behavior for each, thenables wrapped, AggregateError.errors in input order.
  4. A tiny Promise. Custom Promise from scratch. Checkpoint: executor throw rejects; then is always a new promise; handlers run as microtasks; resolving with this is a TypeError.
  5. Orchestration. retry, timeout, series, parallel, mapLimit (later pages in this cluster). Checkpoint: timeout clears its timer; retry does not hide the last error; mapLimit preserves output order with at most N in flight.
  6. this, find, keys. bind, call/apply, forEach, find (holes are visited), includes, Object.keys. Checkpoint: new Bound() ignores bound this; find on a hole is undefined.
  7. Small systems. EventEmitter (emit copies the list), circuit breaker, fetch interceptors. Checkpoint: open does not call fn; you did not assign window.fetch.
  8. Machine coding. Pick one of nested comments, command palette, stopwatch, todo. Checkpoint: keyboard works, state is serializable, you can name the async bug (stale fetch, un-cleared timer).

Time-box each polyfill to 25-40 minutes, then redo it from memory. If you cannot reconstruct reduce without an initial value, you do not know reduce yet. The JavaScript interview guide and coding patterns are how you talk. This cluster is what you type.

What not to do

One correct map plus a hole / thisArg / NaN table beats a folder of slight variations. Do not treat Promise.race as cancellation: the loser keeps running; production cancel is AbortController. Do not start a custom Promise before Promise.all keeps order. Do not skip machine coding because polyfills feel more “CS.” Many loops are a widget plus a 15-minute polyfill. The machine-coding framework is the clock discipline.

Interview answer (out loud)

“I treat frontend JS loops as four question types: spec polyfills, async orchestration, event-loop traces, and a timed widget. I would start from holes and Promise.all order, then empty iterables and AggregateError, then a tiny Promise whose then is a microtask. For SDE3 I would add a concurrency cap and AbortController, and I would not pretend race cancels work. Done means a function I can run, not a course I watched.”

Further reading

Related guides