QJavaScript · Interview preparation
What is hoisting in JavaScript?
Declarations are processed before code executes, but their initialization rules differ.
The idea to remember.
Declarations are processed before code executes, but their initialization rules differ. Function declarations are callable before their line, while let and const remain unavailable in the temporal dead zone.
01Learn by doing
From first example to real project.
Start with the smallest working idea, examine a more detailed example, then look at a real application pattern. Adapt dependencies, error handling and data models to your project.
Basic: closure remembers a binding
01 / BEGINNERThe returned function can still use a variable from its outer scope.
function createCounter() {
let count = 0;
return () => ++count;
}
const next = createCounter();
console.log(next()); // 1
console.log(next()); // 2Intermediate: block scope
02 / INTERMEDIATEEach iteration can keep its own binding with let.
const callbacks = [];
for (let i = 0; i < 3; i++) callbacks.push(() => i);
console.log(callbacks.map(fn => fn())); // [0, 1, 2]Real scenario: isolate private state
03 / REAL SCENARIOA factory can retain private data without exposing it globally.
function createCart() {
const items = [];
return {
add: item => items.push(item),
total: () => items.reduce((sum, item) => sum + item.price, 0)
};
}02Check your understanding
Try it in your own words.
Explain what is hoisting in JavaScript without looking at the code. Then modify the intermediate example, describe one trade-off and identify when the real-world pattern fits.
Keep learning here.
Explore more in-depth guides, exercises and related interview questions in this library.
Browse JavaScript study guides ↗