var and Why It Was Replaced

Before let and const were introduced in 2015, JavaScript had only one way to declare variables: the var keyword. While you shouldn’t use it in modern code, you will encounter it frequently in older codebases, tutorials, and scripts. Understanding how var behaves differently from let is essential for debugging legacy JavaScript.

Function Scope vs Block Scope

Unlike let, which respects block constructs like if or for, var completely ignores them. A variable declared with var is scoped to the entire function it resides in (or the global scope if not in a function).

function testScope() {
  var a = 10;
}
testScope();
try {
  console.log(a);
} catch (e) {
  console.log(e.name);
}

ReferenceError

Because it is function-scoped, var variables are completely inaccessible outside of the function. However, they easily leak out of standard blocks:

if (true) {
  var b = 20;
}
console.log(b);

20

The Function Boundary Trap

A modern developer coming from languages like Java or C++ expects a variable to only exist inside the specific {} block it was declared in, and would expect a crash if they tried to access it outside. That is true of let, but not of var, which scopes to the nearest function boundary, treating all other curly braces as invisible!

Why was it designed this way? The original JavaScript engine from 1995 was built in a massive rush and was designed to be forgiving for beginners. By hoisting all declarations to the top of their function and ignoring complex nested block scopes, the engine could parse and execute scripts extremely fast in a single pass without managing complicated memory boundaries.

Because var ignores blocks, it leaks out of if statements and for loops. let and const, added in ES6 (2015), are block-scoped and do not. In new code there is no reason to reach for var; the reason to understand it is that you will meet it in code written before 2015, and in answers on the internet that never got updated.

This leak issue is even more pronounced in loops:

for (var i = 0; i < 2; i++) {}
console.log(i);

2

Hoisting: Declarations Move to the Top

Variables declared with var are hoisted. This means the JavaScript engine processes their declarations before executing any code, effectively moving them to the top of their scope.

However, only the declaration is hoisted, not the initialization. Before the actual assignment line runs, the variable exists but holds the value undefined. This is our signature interaction—can you predict what happens if we log a hoisted variable?

console.log(hoistedVar);
var hoistedVar = "I am hoisted";

undefined

Rather than crashing with a ReferenceError like let would, var silently returns undefined.

Redeclaration and Global Properties

Another major flaw of var is that it allows you to redeclare the same variable multiple times in the same scope without throwing an error. This easily leads to accidental overwrites.

var c = 1;
var c = 2;
console.log(c);

2

If you declare a var at the top level of a script, it also attaches itself as a property of the global object (like window in browsers or globalThis).

var uninitializedVar;
console.log(uninitializedVar);

undefined

Edge Cases

• Redeclaring a var without an initializer does not reset its value to undefined.
• A var in the global scope creates a property on window (or globalThis), which let and const do not do.