JavaScript Interview Questions & Answers

THE QUESTIONS

Real questions, senior answers

1. 01

   What is event bubbling in JavaScript?

   When an event fires on an element, the browser runs the handler on that element first, then walks up the DOM — parent, grandparent, all the way to the root — running every handler it finds on the way.

   Click a button inside a form: the button's onclick runs, then the form's, then the document's. That upward traversal is bubbling.

   DOM eventsEvent propagation
2. 02

   What is event capturing, and how is it different from bubbling?

   Capturing is the same traversal in the opposite direction: from the root down to the target, before the target's own handler runs. Then the bubbling phase goes back up.

   It exists for historical reasons — Microsoft went one way, Netscape the other — and today capturing is opt-in via the third argument of addEventListener. In practice it's rarely used.

   Capture phaseaddEventListener
3. 03

   What is debouncing and when should you use it?

   Debouncing delays a function until calls stop arriving for a set interval. Type in a search bar and the request fires half a second after the last keystroke — not on every letter.

   Use it for high-frequency user events (typing, resizing) so you don't DDoS your own backend with a request per keypress.

   Rate limitingSearch inputs
4. 04

   console.log('first'); setTimeout(() => console.log('second'), 0); console.log('third'); — what prints, in what order?

   first, third, second.

   setTimeout with 0ms doesn't run immediately — its callback goes to the task queue and waits for the next tick of the event loop. The synchronous logs run first; the timeout callback runs when the call stack is empty.

   Event loopTask queuesetTimeout
5. 05

   What is the difference between prototypal inheritance and class inheritance?

   Class inheritance relates classes via extends. Prototypal inheritance relates objects via the prototype chain: when you access a property that doesn't exist on an object, JavaScript walks up its prototype references until it finds it or runs out.

   It's how JavaScript did code reuse and polymorphism before classes existed — and it's still what class syntax compiles down to.

   Prototype chainObject model
6. 06

   Is extending built-in prototypes (like String.prototype) a good idea?

   No. It's an obscure global change: it can break on other platforms and runtimes, and other developers won't expect your custom methods on primitives.

   If you want portable, extendable code, keep helpers as plain functions.

   Monkey patchingPortability
7. 07

   What does an async function return, and why?

   Always a promise. async is syntax sugar over promises: the function body gets wrapped, and the returned promise resolves with whatever the function returns.

   That's the whole relationship between async/await and promises — await just unwraps them in sequence.

   async/awaitPromises
8. 08

   What is a pure function and why are pure functions useful?

   Same input, same output, no side effects — nothing outside the function changes.

   Pure functions are deterministic and trivial to test, which is why functional patterns (and most state libraries) are built on them.

   Functional programmingDeterminism
9. 09

   What is polyfilling, and what are its drawbacks?

   A polyfill is extra code that implements a language or platform feature for browsers that don't have it — e.g. replacing spread syntax for an old browser, via tooling like Babel.

   The cost: a bigger bundle and more code to parse, so performance suffers. The smart move is shipping polyfills only to the browsers that need them.

   BabelBrowser supportBundle size
10. 10

    What is a closure? Give a practical example.

    A function that remembers the scope where it was created. Declare a variable, define a function next to it, export that function — wherever it runs later, it still has access to that variable.

    That's why a factory function can return a greeter that keeps using the name you gave the factory, long after the factory returned.

    Lexical scopeFactory functions
11. 11

    What is the drawback of closures?

    Memory. Everything in the enclosed scope stays referenced for as long as the function lives, so the garbage collector can't reclaim it.

    It's one reason JavaScript is memory-hungry — and why engineers from C++ backgrounds wince at careless closures.

    Garbage collectionMemory pressure