← Bytedance Interview Insights
The var vs let thing I knew, but I fumbled a bit explaining the event loop part.
Start by predicting the output for both var and let versions, then explain the underlying mechanisms (function scope vs block scope, closures, event loop). Finally, walk through multiple fixes, comparing their trade-offs and modern best practices.
Pro tip: Mention that while let is the modern fix, understanding the IIFE and bind solutions shows depth, and relate it to real-world scenarios like event handlers in loops to demonstrate practical experience.
State that with var, the loop logs the final value (e.g., 5) five times; with let, it logs 0,1,2,3,4 in order. Clarify that setTimeout is asynchronous and callbacks run after the loop completes.
Explain that var is function-scoped, so there is a single shared binding for i. All setTimeout callbacks close over the same variable, which has already been incremented to its final value by the time the callbacks execute.
Explain that let is block-scoped, so each iteration creates a new binding for i. Each callback closes over its own copy of i, preserving the value at the time of the setTimeout call.
Present multiple solutions: using let (modern), wrapping in an IIFE to create a new scope per iteration, using bind to pass the current value, or using forEach over an array. Compare their readability and compatibility.
Conclude that let is the cleanest and most recommended approach in ES6+, but understanding older patterns is useful for legacy code. Emphasize that the core issue is variable scoping and closure capture.
AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.