JavaScript var, let, and const

JavaScript has three keywords for declaring variables: var, let, and const. They differ in scope, reassignment rules, hoisting behavior, and whether they can be redeclared.

Comparison

var

var is function-scoped and hoisted with an initial value of undefined. It can be redeclared and reassigned within its scope.

function example() {
  console.log(x); // undefined (hoisted)
  var x = 10;
  console.log(x); // 10
 
  var x = 20; // redeclaration is allowed
  console.log(x); // 20
}

var is an outdated way to declare variables and can lead to unexpected behavior due to its function scope and hoisting.

It's generally recommended to use let or const in modern codebase.

let

let is block-scoped and can be reassigned, but not redeclared in the same scope. Accessing it before the declaration throws a ReferenceError because of the temporal dead zone (TDZ).

let count = 0;
count = 1; // allowed
 
if (true) {
  let count = 2; // different block-scoped variable
  console.log(count); // 2
}
 
console.log(count); // 1

const

const is block-scoped and must be initialized when declared. It prevents reassignment of the binding, but the contents of objects and arrays can still be mutated.

const PI = 3.14;
// PI = 3.1415; // TypeError: Assignment to constant variable.
 
const user = { name: "Ada" };
user.name = "Grace"; // allowed (mutation)
// user = {}; // TypeError: Assignment to constant variable.

Scope comparison

function demo() {
  if (true) {
    var a = 1;
    let b = 2;
    const c = 3;
  }
 
  // console.log(a); // 1 (function-scoped)
  // console.log(b); // ReferenceError
  // console.log(c); // ReferenceError
}

Hoisting and the temporal dead zone

var declarations are hoisted and initialized with undefined.

let and const declarations are hoisted but remain in the temporal dead zone until the declaration line executes.

console.log(hoistedVar); // undefined
var hoistedVar = "I am hoisted";
 
// console.log(hoistedLet); // ReferenceError: Cannot access before initialization
let hoistedLet = "I am in TDZ until this line";

When to use each

• Prefer const by default to signal that a binding will not change.
• Use let only when you need to reassign the variable.
• Avoid var in modern code to prevent scope and hoisting surprises.