Difference Between let, var, and const

JavaScript Tutorial: var vs let vs const & Hoisting Explained

Learn the differences between let, var, and const in JavaScript.

Difference Between var, let, and const in JavaScript

In JavaScript, variables are used to store and manage data values. You can declare variables using var, let, or const. Each keyword behaves differently in terms of scope, hoisting, and reassignment, which directly affects how your code works.

Understanding these differences is essential for writing clean, predictable, and modern JavaScript. Below is a clear overview of when and how to use each keyword.

  • var: Declares a variable with function-level or global scope. Variables declared with var can be re-declared and reassigned within the same scope. Due to its loose scoping rules, var is generally avoided in modern JavaScript.
  • let: Declares a variable with block scope (inside { }). It allows reassignment but does not allow re-declaration within the same block. This makes let safer and more predictable than var.
  • const: Declares a block-scoped variable that must be initialized at declaration and cannot be reassigned. While the variable reference is constant, the contents of objects and arrays can still be modified.

Example: Declaring Variables Using var, let, and const

JavaScript Example 

/* Using var */
var a = 10;
console.log(a);

/* Using let */
let b = 20;
console.log(b);

/* Using const */
const c = 30;
console.log(c);
Try it Yourself »

Hoisting Behaviour of var, let, and const

In JavaScript, hoisting refers to the process where variable declarations are conceptually moved to the top of their scope during the compilation phase. While all declarations are hoisted, the initialization behavior differs significantly between var, let, and const.

Hoisting with var

Variables declared with var are hoisted to the top of their function or global scope and are automatically initialized with undefined. This means they can be accessed before their declaration without throwing an error, which can lead to unexpected bugs. 

// Variable is hoisted and initialized with undefined
console.log(totalAmount); // Output: undefined

var totalAmount = 250;
console.log(totalAmount); // Output: 250
Try it Yourself »

Hoisting with let

Variables declared with let are hoisted but are placed in the Temporal Dead Zone (TDZ). Accessing them before their declaration results in a ReferenceError, making let safer and more predictable than var. 

// Accessing before initialization causes an error
console.log(userAge); // ReferenceError

let userAge = 30;
console.log(userAge); // Output: 30
Try it Yourself »

Hoisting with const

Variables declared with const follow the same hoisting rules as let and are also subject to the Temporal Dead Zone. In addition, const variables must be initialized at the time of declaration. 

// const variables are not accessible before declaration
console.log(apiUrl); // ReferenceError

const apiUrl = "https://example.com";
Try it Yourself »

Detailed Comparison: var, let, and const

JavaScript provides three different keywords for declaring variables: var, let, and const. While they may appear similar, they differ significantly in terms of scope, hoisting behavior, reassignment rules, and best-practice usage. Understanding these differences is essential for writing reliable and maintainable JavaScript code.

Feature var let const
Scope Function or global scope Block scope ({ }) Block scope ({ })
Re-assignment Allowed Allowed Not allowed after initialization
Re-declaration Allowed within the same scope Not allowed within the same block Not allowed
Initialization Optional at declaration Optional at declaration Required at declaration
Access Before Initialization Returns undefined Throws ReferenceError (Temporal Dead Zone) Throws ReferenceError (Temporal Dead Zone)
Hoisting Hoisted and initialized with undefined Hoisted but inaccessible until initialized Hoisted but inaccessible until initialized

Best Practices for Using var, let, and const

Following modern JavaScript best practices helps you write cleaner, safer, and more maintainable code. The guidelines below reflect industry standards used in professional web applications.

  • Prefer const by default for variables whose values should not be reassigned.
  • Use let only when reassignment is required, such as in loops or conditional logic.
  • Avoid var in modern JavaScript, as it can introduce scope-related bugs and unexpected behavior.
  • Always declare variables at the beginning of their block to improve readability and reduce the risk of reference errors.
Pro Tip: Writing predictable JavaScript becomes much easier when you consistently apply const and let correctly.

Conclusion

Understanding the differences between var, let, and const is essential for writing modern JavaScript. In most cases, prefer const, use let when reassignment is necessary, and avoid var to prevent scope-related bugs.

Previous Next