Understanding JavaScript Variables
var, let, and const

What are Variables in JavaScript?

Variables in JavaScript are containers used to store data values. JavaScript provides three ways to declare variables: var, let, and const. Each one behaves differently in terms of scope, hoisting, and reassignment.

1. Using var

The var keyword was the original way to declare variables in JavaScript before ES6. Variables declared with var are function-scoped and can be re-declared and re-assigned.

// Example: var can be re-declared
var name = "Alice";
var name = "Bob";
console.log(name);
    

Output:

Bob

Why does this work? Because var allows re-declaration within the same scope, which can lead to bugs in larger codebases.

2. Using let

The let keyword, introduced in ES6, is block-scoped (inside { }) and can be re-assigned but not re-declared within the same scope.

// Example: let cannot be re-declared in the same scope
let city = "New York";
city = "San Francisco"; // valid
// let city = "Chicago"; // Error: Identifier 'city' has already been declared
console.log(city);
    

Output:

San Francisco

Question: What happens if you try to re-declare a let variable in the same scope?

Answer: JavaScript will throw a SyntaxError, preventing accidental variable re-declarations.

3. Using const

The const keyword is also block-scoped and is used to declare variables that cannot be re-assigned after their initial value is set.

// Example: const cannot be reassigned
const pi = 3.14;
// pi = 3.1415; // Error: Assignment to constant variable
console.log(pi);
    

Output:

3.14

Tip: Always use const by default unless you know the variable will change, then use let.

Scope Comparison: var vs let vs const

function testScope() {
  if (true) {
    var x = 10;
    let y = 20;
    const z = 30;
  }

  console.log(x); // 10
  // console.log(y); // ReferenceError: y is not defined
  // console.log(z); // ReferenceError: z is not defined
}
testScope();
    

Output:

10

Explanation: x is declared with var, which is function-scoped, so it’s accessible throughout the function. y and z are block-scoped, so they are not accessible outside the if block.

Hoisting Behavior

console.log(a); // undefined
var a = 5;

// console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 10;
    

Explanation: Variables declared with var are hoisted to the top of their scope and initialized as undefined. let and const are hoisted too but are not initialized, leading to a ReferenceError if accessed before declaration.

Summary Table

Keyword	Scope	Hoisting	Re-declaration	Re-assignment
var	Function	Yes (initialized as undefined)	Yes	Yes
let	Block	Yes (TDZ)	No	Yes
const	Block	Yes (TDZ)	No	No

Conclusion

Choosing the right variable declaration keyword helps you write safer, more predictable code. Use const for constants, let for variables that may change, and avoid var unless maintaining legacy code.