var vs let vs const

There are three keywords and three sets of rules. They differ on scope, on when the name becomes usable, and on whether the value can be replaced later.

Scope. var is function scoped. It ignores blocks completely, so a var that is declared inside an if statement or inside a for loop is still visible after that block ends. let and const are block scoped, which means the name is only visible inside the braces that contain it.

Hoisting. All three are hoisted, in the sense that the engine knows about the name before the line runs. What happens at that moment is different, though. A var binding is created and set to no value, so reading it before the declaration gives you no value instead of an error. A let or const binding is created but left empty until the declaration runs, and touching it in between throws a ReferenceError. That short window is called the temporal dead zone.

Reassignment and redeclaration. const forbids both of them. You cannot give the binding a new value, and you cannot declare the same name twice in the same scope. let allows a new value but not a second declaration. var allows both, and that is why declaring the same var name twice is perfectly legal.

Practical guidance. Use const by default, switch to let only when the value really does change, and treat var as something you maintain in old code rather than something you write. There is one important subtlety here. const freezes the name, not the object behind it. You can still push items onto a const array, and you can still assign new properties to a const object.

The var version lets its counter escape out of the loop, and the let version does not. The important difference is not the numbers that are printed inside the loop, because those are the same in both cases. The difference is what happens after the loop ends, and what a function created inside the loop is able to see.

for (var i = 0; i < 3; i++) {
  console.log('var loop:', i);
}
console.log('var is still in scope after the loop:', i);

for (let j = 0; j < 3; j++) {
  console.log('let loop:', j);
}
try {
  console.log(j);
} catch (err) {
  console.log('let is block scoped, so this throws:', err.name);
}

With var, the name lives in the surrounding function scope, so the loop finishes with i equal to 3 and the last line prints 3. With let, the name belongs to the block, and once the block ends the name no longer exists, so the reference throws a ReferenceError and the catch block reports it.

There is a second difference that is subtler, and interviewers like to ask about it. Because var is shared by every round of the loop, any function created inside the loop sees the same variable and therefore the same final value. With let, the engine creates a fresh binding for each round, so every function keeps its own value. If you use a loop variable inside a timeout callback, var prints the last value three times, while let prints zero, one, and two.

That separate binding for each round is the single biggest practical reason to prefer let in loops. It is also the reason that the older habit of copying the value into an inner function is no longer needed.