var, let, and const in JavaScript — Differences Explained for Beginners

If you are learning JavaScript, one of the first questions you will meet is: when should I use var, let, or const?

They all declare variables, but they behave differently — and those differences can cause bugs if you don’t know the rules.

In this post I’ll explain the differences in very simple words, show short code examples you can run, and give clear rules you can use right away. No heavy jargon — just practical advice for students and early React learners.

---

🔎 Why this matters

Choosing the right keyword makes your code safer and easier to reason about:

• Avoid accidental bugs caused by redeclaration or wrong scope.
• Make your intent clear to other developers (and future you).
• Reduce runtime errors caused by Temporal Dead Zone (TDZ) or accidental globals.

Knowing a few small rules will help you write cleaner code from day one.

---

✋ Quick summary (the short rule)

• const — use for values that should not be reassigned. Prefer by default.
• let — use when you need to change the variable later. Block-scoped.
• var — older behaviour, function-scoped, allows redeclaration. Avoid in modern code.

Now let’s see why, with simple examples.

---

🔬 1) Scope: where the variable lives

var — function scope (or global)

function testVar() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10 — visible outside the if-block
}
testVar();

var ignores block boundaries (like if, for) and belongs to the function scope.

let / const — block scope

function testLetConst() {
  if (true) {
    let a = 5;
    const b = 6;
  }
  console.log(a); // ReferenceError
  console.log(b); // ReferenceError
}
testLetConst();

let and const are limited to the block { ... } where they are declared.

Rule: prefer block-scoped let/const to avoid accidental leaks outside blocks.

---

🔁 2) Redeclaration: can you declare the same name twice?

var v = 1;
var v = 2; // allowed — overwrites v

let l = 1;
// let l = 2; // SyntaxError: Identifier 'l' has already been declared

const c = 1;
// const c = 2; // SyntaxError

• var allows redeclaration (can cause accidental overwrites).
• let and const do not allow redeclaration in the same scope.

Rule: avoid var redeclaration problems by using const / let.

---

🔄 3) Reassignment: can you change the value?

let x = 1;
x = 2; // OK

const y = 3;
y = 4; // TypeError: Assignment to constant variable.

• let allows reassignment.
• const does not allow reassigning the variable binding.

Important nuance: const protects the binding, not the value itself for objects.

const obj = { name: "saurav" };
obj.name = "saurav kumar"; // allowed — object content changed
obj = {}; // TypeError — cannot reassign the const binding

Rule: use const for variables that should not be reassigned; for objects you can still mutate properties if needed.

---

⏳ 4) Temporal Dead Zone (TDZ) — let / const safety

console.log(z); // ReferenceError
let z = 10;

let/const are hoisted but not initialized until their line runs — the period before initialization is the TDZ. Accessing them early throws an error. var is hoisted and initialized with undefined, so it gives undefined instead.

Rule: TDZ prevents accidental use before initialization — a safety feature.

---

🔍 5) Global object behavior

In browsers:

var a = 1;
console.log(window.a); // 1

let b = 2;
console.log(window.b); // undefined

Declaring with var at top-level creates a property on the global object (window in browsers). let and const do not. This helps avoid accidental global pollution.

Rule: avoid making globals — use modules and const/let.

---

✅ When to use what (practical guide)

• Start with const: default to const for every variable. It communicates intent: this value should not be reassigned.
• Use let when you need to update the variable (loops, counters, changing state).
• Avoid var in modern JavaScript. Only use it if you must support very old code or environments.

Example — typical modern code style:

const maxUsers = 10;
let current = 0;

function addUser() {
  if (current < maxUsers) {
    current += 1;
  }
}

---

⚠️ Common beginner mistakes

• Using var for everything → leads to accidental scope leaks and redeclaration bugs.
• Expecting const objects to be immutable → const prevents reassigning the variable, but object properties can change.
• Accessing let/const before declaration → TDZ errors — put declarations before use.
• Relying on global var variables — hard to debug and easy to conflict.

---

🎯 Small project example (React friendly)

Imagine a small counter component in React:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // use const for state variable reference
  const step = 1; // step does not change — const

  function increment() {
    setCount((c) => c + step); // we update state with setCount
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Add</button>
    </div>
  );
}

Notes:

• const [count, setCount] is standard — the binding is constant, state changes through setCount.
• Use let for temporary loop counters if needed.

---

🎯 Interview prep — short & sharp

30s answer:

var is function-scoped and allows redeclaration. let and const are block-scoped; let can be reassigned, const cannot. Prefer const by default and let where reassignment is required. Avoid var in new code.

Show quick examples (these are great on a whiteboard):

// var
var a = 1;
var a = 2; // allowed

// let
let b = 1;
// let b = 2; // not allowed

// const
const c = 1;
// c = 2; // TypeError

Common follow-ups & answers:

• Q: Can you mutate a const object? A: Yes — the object contents can change, but you can't reassign the variable.
• Q: Why prefer const by default? A: It makes intent clear and prevents accidental reassignments.

Mini whiteboard challenge: Convert a small var-based snippet into const/let style and explain scope differences.

---

🧠 Key takeaways

• Prefer const for values that won't reassign.
• Use let for variables that will change.
• Avoid var — it has confusing scope and redeclaration rules.
• Remember TDZ for let/const.
• const prevents reassigning bindings, but object properties can still change.

👋 About Me

Hi, I'm Saurav Kumar — a Software Engineer passionate about building modern web and mobile apps using JavaScript, TypeScript, React, Next.js, and React Native.

I’m exploring how AI tools can speed up development,

and I share beginner-friendly tutorials to help others grow faster.

🔗 Connect with me:

LinkedIn — I share short developer insights and learning tips

GitHub — Explore my open-source projects and experiments

If you found this helpful, share it with a friend learning JavaScript — it might help them too.

Until next time, keep coding and keep learning 🚀