📌 Introduction
JavaScript has grown and improved over time. One of the biggest changes came with ES6 (ECMAScript 2015), which introduced two new ways of declaring variables: let and const. Before ES6, developers only used var. However, var often caused confusion because of its function scope and hoisting behavior. With the introduction of let and const, developers now have more predictable and safer options for declaring variables.
🔑 var
- Scope: var has function scope, which means if you declare a variable inside a function, it will only be available inside that function. But if you declare it outside, it becomes available everywhere in your code.
- Hoisting: When the code runs, variables declared with var are moved to the top of their scope. However, their value is not moved. Instead, they start as undefined until the code reaches the line where they are actually defined.
- Redeclaration: You can declare the same variable multiple times using var, which can cause bugs because it may overwrite values without warning.
function demoVar() {
console.log(a); // undefined (hoisted)
var a = 10;
console.log(a); // 10
}
demoVar();
⚠️ The problem with var is that in loops or asynchronous code, the variable does not stay where you expect it, which can create unexpected behavior.
🔑 let
- Scope: let has block scope, which means it only works inside the block (like inside { }) where it is declared.
- Hoisting: Variables declared with let are also hoisted, but they are not given a value until the code actually reaches them. This time between the start of the scope and the actual declaration is called the Temporal Dead Zone (TDZ).
- Redeclaration: You cannot declare the same variable name again in the same scope with let. This helps prevent accidental mistakes.
function demoLet() {
// console.log(b); // ❌ ReferenceError (TDZ)
let b = 20;
console.log(b); // 20
}
demoLet();
✅ Use let when the value of the variable needs to change later.
🔑 const
- Scope: const is also block-scoped, like let. This means it stays inside the block { } where it is declared.
- Hoisting: Just like let, const variables are hoisted but are not initialized until the line of code where they are declared. This also creates a Temporal Dead Zone.
- Redeclaration: You cannot redeclare a variable with const. Once declared, it stays fixed.
- Reassignment: You cannot assign a new value to a const variable. Once it has a value, it cannot be changed. However, this applies only to the variable itself, not to the contents of objects or arrays.
const c = 30;
console.log(c); // 30
// c = 40; // ❌ TypeError: Assignment to constant variable
⚡ But remember, if you use const with arrays or objects, you can still change the items inside them, because only the reference is constant, not the actual content:
const arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]
🆚 var vs let vs const
| Feature |
var |
let |
const |
| Scope |
Function-scoped |
Block-scoped |
Block-scoped |
| Hoisting |
Yes, initialized as undefined |
Yes, but TDZ applies |
Yes, but TDZ applies |
| Redeclaration |
Allowed |
Not allowed |
Not allowed |
| Reassignment |
Allowed |
Allowed |
Not allowed |
![Difference in table]()
📘 Best Practices
- ❌ Avoid using var unless you are maintaining old code that already uses it.
- ✅ Use let if you need a variable whose value will change later.
- ✅ Use const by default for values that should not change. This makes your code more reliable and easier to understand.
📝 Summary
In JavaScript, var, let, and const are used to declare variables, but they behave differently. var is function-scoped, hoisted, and can be redeclared, which often causes issues. let is block-scoped, cannot be redeclared, and should be used when the value may change. const is also block-scoped but cannot be reassigned, making it the best choice for values that should remain constant. By using let and const wisely, developers can write cleaner, safer, and more predictable code.