Understanding Var, Let, and Const in JavaScript: Key Differences Explained

JavaScript offers three ways to declare variables: var, let, and const. While they may seem similar at first, each has distinct behaviors that affect how your code runs. Understanding these differences is crucial for writing efficient and maintainable JavaScript.

In this article, we’ll explore:

• The scope of var, let, and const
• Hoisting and how it impacts variable declarations
• When to use each keyword for optimal performance

---

1. var in JavaScript

Function-Scoped and Hoisted

The var keyword was the original way to declare variables in JavaScript.

Key Characteristics:

• Function-scoped: Variables are accessible only within the function they are declared in.
• Hoisted: Declarations are moved to the top of their scope, but initializations remain in place.
• Re-declarable: You can re-declare the same variable without errors.

Example:

javascript

function exampleVar() {  
  if (true) {  
    var x = 10;  
    console.log(x); // 10  
  }  
  console.log(x); // 10 (accessible outside the block)  
}  

Issues with var

• Can lead to unintended variable leaks due to function scope.
• No block-level scoping, increasing the risk of bugs.

---

2. let in JavaScript

Block-Scoped and Mutable

Introduced in ES6 (ES2015), let provides a better way to handle variables.

Key Characteristics:

• Block-scoped: Only accessible within the block ({}) where it’s defined.
• Not re-declarable: Throws an error if re-declared in the same scope.
• Mutable: Can be reassigned.

Example:

javascript

function exampleLet() {  
  if (true) {  
    let y = 20;  
    console.log(y); // 20  
  }  
  console.log(y); // ReferenceError: y is not defined  
}  

Advantages of let

• Prevents variable leakage outside blocks.
• Encourages cleaner, more predictable code.

---

3. const in JavaScript

Block-Scoped and Immutable (for primitives)

Also introduced in ES6, const is used for declaring constants.

Key Characteristics:

• Block-scoped: Like let, but cannot be reassigned.
• Must be initialized: Requires a value at declaration.
• Immutable for primitives: For objects/arrays, properties can still be modified.

Example:

javascript

const PI = 3.14;  
PI = 3.14159; // TypeError: Assignment to constant variable  

const user = { name: "Alice" };  
user.name = "Bob"; // Allowed (object property change)  

When to Use const

• For values that should not be reassigned.
• Improves code readability by signaling intent.

---

Key Differences Summary

Feature	var	let	const
Scope	Function	Block	Block
Hoisting	Yes (initialized as undefined)	Yes (but in TDZ*)	Yes (but in TDZ*)
Reassignment	Allowed	Allowed	Not Allowed
Redeclaration	Allowed	Not Allowed	Not Allowed

(*TDZ: Temporal Dead Zone – accessing before declaration throws an error.)

---

Best Practices for Using var, let, and const

1. Prefer const by default – Use it unless reassignment is needed.
2. Use let for variables that change – Like loop counters or dynamic values.
3. Avoid var in modern JS – Legacy code may still use it, but let and const are better.

---

Conclusion

Understanding var, let, and const is essential for writing robust JavaScript. While var is outdated, let and const provide block scoping, better predictability, and fewer bugs.

Key Takeaways:

• Use const for constants.
• Use let for variables that need reassignment.
• Avoid var in new projects.