JavaScript var
var was the original way to declare variables in JavaScript (before ES6). It has several quirks that can lead to bugs.
var is Function-Scoped
A var variable lives in the enclosing function, not the block. This means it leaks out of if/for blocks.
var Leaks Out of Blocks
if (true) {
var x = 10; // leaks outside the if block
}
console.log(x); // 10 (no error!)var Can Be Re-declared
Re-declaration
var name = "Alice";
var name = "Bob"; // no error — silently overwrites!
console.log(name); // "Bob"var is Hoisted
var declarations are hoisted to the top of their function. The variable exists but is undefined before the assignment line.
Hoisting Demo
console.log(message); // undefined (not an error!)
var message = "hello";
console.log(message); // "hello"
// JavaScript sees it as:
// var message; (hoisted declaration)
// console.log(message); (undefined)
// message = "hello";
// console.log(message);The Loop Bug
var in a for-loop shares the variable across all iterations — a classic bug with closures.
Loop Bug with var
// Bug: all callbacks share the SAME var i
const fns = [];
for (var i = 0; i < 3; i++) {
fns.push(() => i);
}
console.log(fns[0]()); // 3 (not 0!)
console.log(fns[1]()); // 3
// Fix: use let instead
const fns2 = [];
for (let j = 0; j < 3; j++) {
fns2.push(() => j);
}
console.log(fns2[0]()); // 0
console.log(fns2[1]()); // 1| Quirk | Behaviour |
|---|---|
| Scope | Function-scoped (leaks out of blocks) |
| Re-declaration | Allowed — silently overwrites |
| Hoisting | Declaration hoisted, value is undefined |
| Global scope | Adds to window object in browsers |
📝 Note: Avoid var in modern JavaScript. Use let or const instead — they are block-scoped and don't have these quirks.
Exercise:
What type of scope does var have?