JavaScript Variables: var, let, and const

Variables are named containers for values that a program can create, read, and update. Modern JavaScript provides three ways to declare a variable — var, let, and const — and each behaves differently in terms of scope, hoisting, and whether reassignment is allowed.

Understanding the differences between these three keywords is one of the most important early steps in learning JavaScript, because using the wrong one is a frequent source of confusing bugs, especially inside loops and conditional blocks.

Why it matters

There are three ways to declare a variable in JavaScript, and choosing the wrong one causes real bugs: var leaks out of blocks and can be used before it is assigned. Modern code uses const by default and let when a value must change, and interviewers ask about the differences in nearly every JavaScript interview.

var — Function-Scoped and Hoisted

var is the original way to declare variables in JavaScript. A variable declared with var is scoped to the nearest enclosing function (or the global scope if declared outside any function) — not to the block ({ }) it appears in. var declarations are also "hoisted": the declaration is moved to the top of its scope during compilation, but the value is not, so the variable exists as undefined until the line where it is assigned actually runs.

let — Block-Scoped and Reassignable

let declares a variable scoped to the nearest enclosing block, such as an if block, a for loop, or any pair of curly braces. Like var, a let variable can be reassigned after declaration, but unlike var, accessing it before its declaration line throws a ReferenceError rather than silently returning undefined — this gap is called the "temporal dead zone."

const — Block-Scoped and Not Reassignable

const behaves exactly like let in terms of scoping and the temporal dead zone, but a const variable cannot be reassigned after its initial value is set, and it must be initialized at the point of declaration. Importantly, const only prevents reassigning the variable itself — if the value is an object or array, its contents can still be mutated.

Choosing Between Them

Modern JavaScript style strongly favors const by default, switching to let only when a variable genuinely needs to be reassigned, and avoiding var almost entirely in new code because of its confusing function-scoping and hoisting behavior.

• const — default choice; value binding never changes.
• let — used when the variable will be reassigned, such as a loop counter or an accumulator.
• var — legacy keyword, generally avoided in modern code except when maintaining older codebases.

Examples

if (true) {
  var leaked = "I am visible outside the block";
  let contained = "I am only visible inside the block";
}

console.log(leaked);
console.log(typeof contained);

I am visible outside the block
undefined

console.log(hoistedVar); // no error, just undefined
var hoistedVar = "assigned later";

try {
  console.log(hoistedLet);
  let hoistedLet = "assigned later";
} catch (error) {
  console.log(error.message);
}

const PI = 3.14159;
// PI = 3; // Uncommenting this line throws: Assignment to constant variable.
console.log(PI);

undefined
Cannot access 'hoistedLet' before initialization
3.14159

Exercise

The code fails because total is declared with const but is changed, and the loop counter declared with var remains visible after the loop. Choose the right keyword for each so that the total is printed and the counter no longer exists outside the loop.

Expected output: 6 then undefined

const total = 0;

for (var i = 1; i <= 3; i++) {
  total += i;
}

console.log(total);
console.log(typeof i); // should print "undefined": i must not exist out here

let total = 0;

for (let i = 1; i <= 3; i++) {
  total += i;
}

console.log(total);
console.log(typeof i); // should print "undefined": i must not exist out here

Quick quiz

Interview questions