Free lesson · JavaScript Basic to Advance

The Complete Interview Question Map

Easy5 min read

Every Question, Mapped

This Topic is the reference document. Every Interview Lens Topic from across the course, cross-referenced and organized by interview question pattern. The single resource to scan before each interview round.

The structure: questions grouped by topic, with a one-line answer skeleton for each and a pointer to the deeper Topic. This isn't a substitute for the underlying Topics — if you can't already answer a question, the skeleton won't save you. But if you've worked through the course, this map is how you do final review before walking into an interview.

Use this Topic like a flashcard deck:

• Scan the question
• Try to articulate the answer out loud, in 30 seconds
• If you stumble, go back to the source Topic
• Don't move on until you can answer cleanly under your own breath

The questions are organized into seven clusters. Most senior interviews touch three to five of them. Staff interviews touch more, and probe deeper.

Cluster 1: The Runtime Model

The foundation. Almost every interview probes at least one of these.

"Explain the event loop." Single-threaded JavaScript. Two queues — microtasks (Promise callbacks) and tasks (setTimeout, I/O). Synchronous code runs first. Microtask queue drained completely. One task. Microtask drain again. One task. Repeat. → Topic 9.11.

"What's the difference between setTimeout(fn, 0) and Promise.resolve().then(fn)?" Both async, but Promise is microtask (higher priority), setTimeout is task. Promise runs first. → Topic 9.2.

"Explain hoisting." var declarations and function declarations are hoisted to the top of their scope. let and const are also hoisted but with a temporal dead zone — accessing them before declaration throws. → Topic 3.4, 3.5.

"What's the temporal dead zone?" The region from the top of a block to where a let/const is declared. Accessing the variable in that region is a ReferenceError. Different from var (which would return undefined). → Topic 3.5.

"How does this work?" Four rules based on how the function is called. Method call: this is the object. Plain call: undefined in strict mode. new call: the new instance. call/apply/bind: explicit binding. Arrow functions inherit this from surrounding scope, ignoring these rules. → Topic 8.1.

Cluster 2: Closures and Scope

"What is a closure?" A function plus the variables from its enclosing scope that it captured. The captured variables persist even after the enclosing function returns. → Topic 6.3, 6.7.

"Give a practical use of closures." Private state (variables only accessible to specific functions). Memoization. Currying. Event handler factories. → Topic 6.4, 6.5.

"The classic loop problem: why does var i produce the wrong output and let i fix it?" With var, the loop variable is function-scoped — all callbacks share the same i, which equals the final value by the time they run. With let, the loop variable is block-scoped — each iteration has its own i. → Topic 6.6.

"What's the difference between lexical and dynamic scope?" Lexical: a function's scope is determined by where it's written. Dynamic: by where it's called from. JavaScript is lexically scoped. The exception is this, which is dynamic — covered by the four rules. → Topic 6.2.

Cluster 3: Objects, Prototypes, Classes

"How does prototypal inheritance work?" Every object has a hidden prototype reference. Property access walks up the chain. Methods can be shared by being placed on the prototype rather than on each instance. → Topic 7.5, 7.8.

"Are classes real, or are they syntactic sugar?" Syntactic sugar over the prototype mechanism. class User { method() {} } creates a constructor function User with method on its prototype. typeof User === "function". → Topic 8.2, 8.7.

"Implement new from scratch." Create an empty object, set its prototype to constructor.prototype, call the constructor with this bound to the new object, return the new object (unless the constructor returns an object). → Topic 7.8.

"What's the difference between Object.create(proto) and new Function()?" Both produce objects linked to a prototype. Object.create takes the prototype directly. new takes a constructor function and uses its .prototype property. The mechanism is the same; the syntax differs. → Topic 7.6.

"When should you use inheritance vs composition?" Inheritance for genuine is-a relationships. Composition for has-a or behavior reuse. Modern OO design favors composition. → Topic 8.6, 8.7.

"What are private fields and how do they work?" Properties prefixed with #. Truly inaccessible outside the class — syntax error to access from outside. Replaces older patterns like underscore conventions or closure-based privacy. → Topic 8.5.

Cluster 4: Async

"What is a Promise?" An object representing a future value. Has three states — pending, fulfilled, rejected. Once settled, the state cannot change. → Topic 9.4, 9.12.

"Compare .then/.catch with async/await." async/await is syntactic sugar over Promises. Same underlying mechanism. async functions return Promises. await pauses execution until the Promise settles. → Topic 9.6.

"Implement Promise.all from scratch." Counter for completed Promises. Results array indexed by position. Each Promise's .then writes to its index and increments the counter. When counter equals length, resolve. Any rejection rejects the outer Promise. Handle the empty-input case. → Topic 9.12.

"What's the difference between Promise.all, Promise.race, Promise.allSettled, Promise.any?" all: all must succeed. race: first to settle wins (success or failure). allSettled: wait for all, get a report of each. any: first success wins, tolerates failures. → Topic 9.8.

"How would you build a retry pattern?" Loop with try/catch. Each iteration tries the operation. On failure, wait with exponential backoff and try again. After max attempts, throw a final error. → Topic 9.7, 9.12.

"How does AbortController work?" Object with a signal property and an abort() method. Pass the signal to fetch (or other abortable APIs). Calling abort() cancels in-flight operations and rejects their Promises with an AbortError. → Topic 9.7, 12.5.

Cluster 5: Modern JavaScript

"What's the difference between == and ===?" == does type coercion before comparison. === requires both type and value to match. Always use === unless you specifically need coercion. → Topic 2.7, 2.8.

"Explain destructuring." Syntax for extracting values from objects or arrays into variables. Supports renaming, defaults, nested patterns. → Topic 10.1.

"What does the ... operator do?" Two things depending on context. Spread (in array/object literals or function calls): expands an iterable into individual elements. Rest (in function parameters or destructuring): collects multiple elements into one. → Topic 10.2.

"What's optional chaining?" The ?. operator. Returns undefined instead of throwing when accessing a property of null or undefined. → Topic 10.3.

"Map vs Object?" Map preserves key insertion order, supports any key type (including objects), has explicit .size, faster for frequent additions/removals. Object has prototype chain (can collide with inherited names), only string/symbol keys, but slightly simpler syntax. → Topic 10.4.

Cluster 6: Modules and the Ecosystem

"What's the difference between require and import?" require is CommonJS: synchronous, dynamic, snapshot-based exports. import is ES Modules: static, asynchronous-capable, live-binding exports. Modern default is import. → Topic 11.2, 11.5, 11.7.

"Default vs named exports?" Default: at most one per module, importer chooses the name. Named: any number, names must match. Modern style guides favor named for refactorability. → Topic 11.3.

"What's a circular dependency? How do you handle it?" When module A imports from B and B imports from A. ES Modules handle them via live bindings — exports may be partially defined during loading. Best fix is usually restructuring to break the cycle. → Topic 11.7.

"How does Node resolve import "lodash"?" Walks up the directory tree looking in node_modules at each level. Reads the package's package.json to find the entry point. → Topic 11.6.

Cluster 7: Browser, DOM, Performance

"Explain event delegation." Single listener on a parent element instead of many listeners on children. Use event.target to identify the actual clicked element. Works with dynamically added children. → Topic 12.4, 12.7.

"What's the difference between localStorage, sessionStorage, and cookies?" localStorage persists across sessions, large capacity, client-only. sessionStorage same but tab-scoped. Cookies sent with every HTTP request, small capacity, useful for server-visible state. → Topic 12.6, 12.7.

"What's a memory leak in JavaScript? How would you find one?" Objects that stay reachable when they shouldn't. Find them with heap snapshots — take baseline, perform suspected action, take another snapshot, compare. Common causes: caches without eviction, forgotten event listeners, timers, closures holding large references. → Topic 13.5, 13.7.

"Explain hidden classes in V8." V8's internal representation of object shapes. Objects with the same properties added in the same order share a hidden class. Critical for inline caches and JIT optimization. → Topic 13.3, 13.7.

"How does V8 optimize JavaScript?" Tiered compilation. Ignition interprets bytecode. Hot functions get compiled by Sparkplug (fast) then TurboFan (optimizing). Optimizations depend on type and shape stability — varying types or shapes cause deoptimization. → Topic 13.3, 13.7.

Using This Map

Three ways to use this Topic effectively:

1. Cold scan. Read it through end to end. If any question feels unfamiliar, return to its source Topic. The map isn't a substitute — it's a navigator.

2. Daily flashcards. Pick five questions per day. Answer each out loud, in 30 seconds. Compare against the source Topic. Track which ones you stumble on.

3. Pre-interview review. The night before an interview, scan the cluster(s) most relevant to the role. For a frontend role, lean on Clusters 5, 6, 7. For a Node/backend role, lean on Clusters 1, 4, 6. For a staff role, prepare for all seven.

Don't try to memorize this map. Use it as a roadmap. The depth lives in the Topics it points to.

Back to JavaScript Basic to Advance