Web Interview Playbook

Search is available after the site is built (`npm run build && npm run preview`).

JavaScript Core Interview Preparation

JavaScript interviews test whether you understand how the language actually runs โ€” not just syntax. Expect output questions, polyfill challenges, and โ€œexplain this codeโ€ moments.

What Interviewers Look For

  • Closures, scope, and the this keyword
  • Event loop, microtasks vs macrotasks
  • Prototypes and inheritance
  • ES6+ features used correctly (not just copied from Stack Overflow)
  • Ability to implement common utilities from scratch

Files in This Section

FilePurpose
topics-not-to-miss.mdMust-know concepts checklist
interview-questions.md30+ questions with full answers
tricky-output-questions.md15+ output prediction problems
polyfills.mdImplement map, bind, debounce, etc.
coding-questions.md15 hands-on coding problems
common-mistakes.mdWhat students get wrong
revision-sheet.mdOne-page cram before interview
mock-interview.md45-minute practice flow

Study Order

  1. topics-not-to-miss.md โ€” identify gaps
  2. interview-questions.md โ€” 5 questions/day, out loud
  3. tricky-output-questions.md โ€” predict output before scrolling to answers
  4. polyfills.md โ€” write each polyfill without looking, then compare
  5. coding-questions.md โ€” solve 2โ€“3 problems per day
  6. mock-interview.md โ€” practice with a friend
  7. revision-sheet.md โ€” day before interview

Time Estimate

  • Minimum viable prep: 5โ€“7 days
  • Solid prep: 2 weeks (with polyfills + coding problems)

Project Connection

Be ready to explain: async data fetching in your project, how you handled state, any utility functions you wrote, and one bug you debugged that taught you something about JS internals.

Interactive

Event Loop Stepper

Step through real code and watch the call stack, Web APIs, and both queues โ€” see WHY promises beat setTimeout.

console.log('start');setTimeout(() => {  console.log('timeout');}, 0);Promise.resolve().then(() => {  console.log('promise');});console.log('end');

Call stack

(script)

Web APIs

Microtask queue

Macrotask queue

The script starts running โ€” the script's frame is pushed onto the call stack.

1 / 11

Promise State Machine

resolve, reject, and try to change a settled promise โ€” see which handlers fire and why settled means locked.

pending
fulfilled โœ“
rejected โœ—
.then(onFulfilled).catch(onRejected).finally(cleanup)

Hoisting & TDZ Stepper

Watch the creation phase register var, let, and functions differently โ€” then see exactly why the TDZ throws.

console.log(a);console.log(b);var a = 1;let b = 2;
creation phase
bindingkindvalue
scope is emptyโ€ฆ

CREATION PHASE: before any line runs, the engine registers every declaration in scope.

1 / 6

this Binding Resolver

Walk the priority ladder (new โ†’ bind โ†’ method โ†’ arrow โ†’ default) for real call sites and see what this becomes.

const user = {  name: 'Ada',  hi() { console.log(this.name); }};user.hi();const f = user.hi;f();
new Fn()? โ†’ the new objectโ€ฆ
fn.call / fn.apply / bound? โ†’ the given thisArg
obj.fn()? โ†’ the object before the dot
arrow function? โ†’ this of the enclosing scope
default โ†’ undefined (strict) / globalThis

this = ?

user.hi() โ€” walk the priority ladder top-down for THIS call site.

1 / 8

Closure Scope-Chain Diagram

Watch makeCounter() return โ€” and its scope refuse to die. See exactly what a closure keeps alive, and why var loops print 3, 3, 3.

function makeCounter() {  let count = 0;  return () => ++count;}const counterA = makeCounter();const counterB = makeCounter();console.log(counterA()); // 1console.log(counterA()); // 2console.log(counterB()); // 1
makeCounter() call #1executing
count: 0
outer โ†’ Global
Globalexecuting
makeCounter: ฦ’
counterA: โ€”
counterB: โ€”

makeCounter() runs. Every call creates a FRESH environment record โ€” this one holds its own count.

1 / 9

Type Coercion Stepper

Walk [] == ![] one spec rule at a time and watch the expression rewrite itself to true โ€” then never fear a coercion question again.

console.log([] == ![]);
[] == ![]

The classic. `!` binds tighter than `==`, so evaluate `![]` first.

1 / 6

Debounce vs Throttle Timeline

Type into a real input and watch your keystrokes race down three lanes โ€” see the debounce timer restart on every key, and why throttle fires anyway.

debounce
throttle

A burst of 8 keystrokes arrives โ€” watch all three lanes respond differently.

raw eventsdebounce(300ms, trailing)throttle(300ms, leading)

1 events โ†’ 0 debounced ยท 1 throttled calls

1 / 4

Study materials