DEV Community

Cover image for var vs let vs const in JavaScript: A Deep Dive for Beginners
Developer Hint
Developer Hint

Posted on • Originally published at developerhint.blog

var vs let vs const in JavaScript: A Deep Dive for Beginners

#webdev #programming #javascript

Introduction

JavaScript gives us three ways to declare variables: var, let, and const.

At first, they may look similar but they behave very differently when it comes to scope, hoisting, and reassignment. Choosing the wrong one can lead to bugs that are hard to track.

Let’s break them down step by step.

What Is var in JavaScript?

var is the old way of declaring variables in JavaScript.

Example

var name = "Ali";
Enter fullscreen mode Exit fullscreen mode

Key Characteristics

  • Function-scoped
  • Hoisted with undefined
  • Can be redeclared
  • Can be reassigned

Scope Differences

var Scope

var is function-scoped, not block-scoped.

if (true) {
var age = 25;
}
console.log(age); // 25
Enter fullscreen mode Exit fullscreen mode

⚠️ This can cause unexpected behavior.

let and const Scope

let and const are block-scoped.

if (true) {
let city = "Mogadishu";
}
console.log(city); // Error
Enter fullscreen mode Exit fullscreen mode

✔ Much safer and predictable.

Hoisting Behavior Explained

Hoisting with var

console.log(x);
var x = 10;
Enter fullscreen mode Exit fullscreen mode

Output: undefined

var is hoisted and initialized with undefined.

Hoisting with let and const

console.log(y);
let y = 5;
❌ Error:
Enter fullscreen mode Exit fullscreen mode

ReferenceError: Cannot access 'y' before initialization
This happens because of the Temporal Dead Zone (TDZ).

Redeclaration Rules

var Allows Redeclaration

var score = 10;
var score = 20;
Enter fullscreen mode Exit fullscreen mode

✔ No error (but risky).

let and const Do NOT

let score = 10;
let score = 20; // Error
Enter fullscreen mode Exit fullscreen mode

✔ Prevents accidental overwrites.

Reassignment Differences

var and let

let count = 1;
count = 2; // Allowed
Enter fullscreen mode Exit fullscreen mode

const

const PI = 3.14;
PI = 3.15; // Error
Enter fullscreen mode Exit fullscreen mode

⚠️ const means the variable reference cannot change.

Important Note About const Objects

You can modify object properties declared with const.

const user = { name: "Ali" };
user.name = "Ahmed"; // Allowed
Enter fullscreen mode Exit fullscreen mode

✔ The reference stays the same.

When to Use What

  • ✅ Use const by default
  • ✅ Use let when value needs to change
  • ❌ Avoid var in modern JavaScript

Common Beginner Mistakes

  1. Using var out of habit
  2. Thinking const means “immutable”
  3. Accessing let variables too early
  4. Mixing scopes accidentally

Best Practices

  • Always start with const
  • Switch to let only when needed
  • Never use var in modern code
  • Keep variable scopes small and clear

Top comments (0)