Episode 1 — Fundamentals / 1.17 — Additional JavaScript Topics
Interview Questions: Throttle, Debounce & JSON (Episode 1)
How to use this material (instructions)
- Read
1.17.aand1.17.b. - Answer aloud, then compare below.
- Pair with
1.17-Exercise-Questions.md.
Q1. What is the difference between throttling and debouncing?
Why interviewers ask: Scroll/search performance is a daily front-end topic.
Model answer:
Throttling limits how often a function can run — e.g. at most once every 200ms while scroll events fire continuously. Debouncing delays execution until events pause for a set time — e.g. run a search 300ms after the user stops typing. Use throttle for steady sampling of a stream; debounce for “user finished” triggers (API calls, autosave, resize end).
Q2. When would you use requestAnimationFrame instead of throttle?
Why interviewers ask: Ties DOM work to the display refresh.
Model answer:
For visual updates that should align with painting (animations, scroll-linked transforms), requestAnimationFrame schedules work once per frame (~60fps) and avoids layout thrashing when combined with read/write discipline. Throttle is a time abstraction in milliseconds — still useful for non-visual work or when you need a fixed wall-clock interval independent of frame rate.
Q3. What does JSON.parse throw on invalid input?
Why interviewers ask: Defensive parsing around localStorage and user paste.
Model answer:
JSON.parse throws SyntaxError if the string is not valid JSON (wrong quotes, trailing commas in older JSON, truncated payloads). Production code wraps parse in try/catch, falls back to defaults, and logs for debugging. response.json() from fetch similarly rejects on invalid JSON body.
Q4. What types does JSON support, and what happens to undefined in an object?
Why interviewers ask: Serialization surprises in APIs.
Model answer:
JSON supports objects, arrays, strings (double-quoted), numbers, true, false, and null. undefined as an object property value is omitted when stringifying. undefined in an array becomes null in the JSON text. Functions, Symbol keys, and circular structures are problematic — functions are dropped; cycles cause stringify to throw.
Q5. Why is JSON.stringify useful with localStorage?
Why interviewers ask: Storage API is string-only.
Model answer:
localStorage stores strings only. Complex state (objects, arrays) must be serialized. JSON.stringify converts a plain object graph to a string; JSON.parse restores it. Always handle parse errors and schema drift (old app versions writing incompatible shapes).
Quick-fire
| # | Question | One-line |
|---|---|---|
| 1 | API after user stops typing | Debounce |
| 2 | Sample scroll every 150ms | Throttle |
| 3 | parse failure | SyntaxError |
| 4 | Cycle in object + stringify | Throws |
← Back to 1.17 — README