JS var/let/const

Difference Between var, let and const

The primary difference between var, let, and const lies in scoping mechanisms, reassignment rules, and how JavaScript handles them via hoisting.

Variables declared with var are hoisted but initialized with undefined.

Variables declared with let and const are also hoisted, but not initialized.

Using a let or const variable before it is declared will result in a ReferenceError.

The time between the start of the block and the declaration is called the Temporal Dead Zone.

What is Not Good?

var does not have to be declared.

var is hoisted.

var binds to this.

Note: Modern JavaScript standards recommend avoiding var entirely to minimize unintentional bugs.

Scope Rules

var is function-scoped: If you declare a var variable inside a loop or an if block, it "leaks out" and is accessible anywhere outside the block.

let and const are block-scoped: They are confined strictly to the nearest pair of curly braces {} (such as loops, functions, or conditional blocks).

Note: As a rule of thumb, you should use const by default, and only use let when you have to reassign the variable after initialization. You should avoid using var.

What is Good?

let and const have block scope.

let and const can not be redeclared.

let and const must be declared before use.

let and const does not bind to this.

let and const are not hoisted.

Example

if (true) {

  var firstName = "John";

  let lastName = "Doe";

}

let text1 = text2 = "unknown";

if (typeof firstName !== "undefined") text1 = firstName;

if (typeof lastName !== "undefined") text2 = lastName;

Reassignment vs. Redeclaration

var allows you to accidentally re-declare the exact same variable name in the same scope, silently overwriting earlier values.

let can be updated/reassigned, but it throws an error if you attempt to re-declare it within the same scope.

const is strictly read-only. It requires an initial value immediately upon declaration and cannot be reassigned later.

Note: on const objects: You cannot reassign a const variable with a completely new value, you can still change the properties of an object or array declared with const.

Example

// Create user object

const user = { name: "Alice" };

// This will work

user.name = "Bob";

let text = user.name + " ";

// This will not work

try {

  user = { name: "Charlie" };

  text += user.name;

} catch(err) {

  text += err;

}

Hoisting and the Temporal Dead Zone (TDZ)

All variables are hoisted to the top of their scope by the JavaScript engine, but they are treated differently:

var variables are hoisted and automatically assigned a default value of undefined. You can reference them before they are declared in the code without breaking the application.

let and const are hoisted but remain completely uninitialized. The region of code from the start of the block until the line they are declared is called the Temporal Dead Zone. Accessing them here instantly crashes with a ReferenceError.

Best Practice

Developers should follow these guidelines for modern JavaScript (ES6 - 2015+):

Always use const by default. It prevents accidental reassignments and makes your code more predictable.

Only use let when: You know its value needs to change later (inside a loop or a mathematical counter).

Never use var. Its unpredictable scoping and the redeclaration rules are known to cause bugs.