JavaScript const vs let vs var: Prefer const and let

JavaScript gives you three main ways to declare variables, but modern code usually uses const and let instead of var. This article explains why that rule exists, how the three declarations behave differently, and how to choose the right one in real code.

Quick answer: Use const by default, use let when the value must change, and avoid var in new code because it uses function scope and can create confusing bugs.

Difficulty: Beginner

You'll understand this better if you know: basic JavaScript variables, simple assignment with =, and how blocks like if and for statements work.

1. What Is const, let, and var?

const, let, and var are variable declaration keywords. They all create named references to values, but they differ in scope, reassignment rules, and how predictable they are inside blocks of code.

const declares a variable that cannot be reassigned.
let declares a variable that can be reassigned later.
var also declares a variable, but it behaves differently because it is function-scoped rather than block-scoped.

The practical rule of thumb is simple: prefer const and let because they match how modern JavaScript code is read, maintained, and debugged.

2. Why Prefer const and let Over var?

Modern JavaScript style prefers const and let because they reduce accidental bugs and make code easier to reason about. They limit a variable to the block where it is needed, which helps prevent name collisions and unexpected reuse.

var can leak outside blocks, be redeclared more easily, and behave in ways that surprise beginners. Those behaviors were acceptable in older JavaScript, but they are usually a disadvantage in new code.

Use const when a variable should keep the same binding, such as a configuration value or a DOM element reference. Use let when a variable must change over time, such as a counter, loop index, or temporary state.

3. Basic Syntax or Core Idea

The syntax for all three declarations is short, but the meaning differs.

Declaring a constant

Use const when you do not want to reassign the variable after initialization.

const siteName = "DevDocs10";

This creates a binding named siteName. The binding stays the same, which makes the code easier to trust.

Declaring a mutable variable

Use let when the value needs to change.

let count = 0;

Later, you can assign a new value to count without redeclaring it.

The older var keyword

var still works, but it is usually avoided in new code.

var legacyName = "old style";

Although this is valid JavaScript, it does not give you the same scoping behavior as let and const.

4. Step-by-Step Examples

Example 1: A value that should not change

Use const for values that should stay fixed, such as a tax rate or an application name.

const taxRate = 0.2;

This is the cleanest choice because the value is meant to stay stable.

Example 2: A counter that changes

Use let when the same variable will receive new values.

let attempts = 0;
attempts = attempts + 1;

This works because let allows reassignment.

Example 3: Loop variables

Modern loops should usually use let for the loop index.

for (let i = 0; i < 3; i++) {
  console.log(i);
}

Each loop iteration can safely use the same variable name without relying on function-scoped behavior.

Example 4: A block-local value

let and const stay inside the block where they are declared.

if (true) {
  const message = "Inside the block";
  console.log(message);
}

The variable message is available only inside the if block, which helps prevent accidental use elsewhere.

5. Practical Use Cases

Use const for imported configuration values, settings objects, and DOM element references that do not need rebinding.
Use let for counters, form state, progress values, and variables that change after calculations.
Use const in helper functions when the local value is only assigned once.
Use let in loops or accumulators where reassignment is expected.
Avoid var in new browser, Node.js, and module-based JavaScript code unless you are maintaining older code.

6. Common Mistakes

Mistake 1: Reassigning a const binding

const prevents reassignment, so beginners often try to update it as if it were let.

Problem: Reassigning a const variable causes a runtime or compile-time style error in JavaScript engines: Assignment to constant variable.

const score = 10;
score = 11;

Fix: Use let when the value must change.

let score = 10;
score = 11;

The corrected version works because let allows the variable to take a new value.

Mistake 2: Expecting var to follow block scope

var does not respect block scope the way let and const do. That often causes values to remain visible outside an if or for block.

Problem: This code assumes message exists only inside the if block, but var makes it function-scoped instead.

if (true) {
  var message = "hello";
}
console.log(message);

Fix: Use const or let for block-local variables.

if (true) {
  const message = "hello";
  console.log(message);
}
// message is not available here

The fixed version works because block-scoped declarations stay inside the block where they were created.

Mistake 3: Redeclaring the same let variable in one block

let protects you from accidental duplicate declarations. Beginners sometimes copy a line and forget they already declared that name in the same scope.

Problem: Redeclaring the same let variable in one scope causes Identifier has already been declared.

let status = "loading";
let status = "ready";

Fix: Declare the variable once, then assign a new value later if needed.

let status = "loading";
status = "ready";

The corrected version works because reassignment is allowed, but redeclaration is not.

7. Best Practices

Practice 1: Default to const

Choosing const first keeps your code honest about whether a variable should really change. If a value never gets reassigned, const communicates that clearly.

const apiBaseUrl = "/api";

This is better than starting with let out of habit, because readers immediately know the binding stays fixed.

Practice 2: Use let only when reassignment is part of the design

If a variable changes during the logic of a function, let is the correct tool. That makes the mutation intentional rather than accidental.

let total = 0;
total = total + 5;

Using let here is clearer than trying to force the same pattern into const.

Practice 3: Avoid var in new code

var is more likely to cause accidental scope bugs, especially in larger files. Modern teams often treat it as a legacy keyword and avoid it entirely in new code.

// Prefer this
const username = "Ava";

When you avoid var, the codebase becomes easier to search, refactor, and maintain.

8. Limitations and Edge Cases

const does not make an object or array deeply immutable. It only prevents rebinding the variable name.
let and const are block-scoped, so variables inside a block are not available outside it.
var is function-scoped, which can still matter in older codebases and during maintenance work.
In loops, let usually behaves better than var, especially when closures or callbacks are involved.
All three declarations are hoisted in some form, but let and const are not usable before initialization because of the temporal dead zone.

Note: If you are modifying the contents of an array or object, you can still use const for the binding. The rule is about reassigning the variable, not freezing the value itself.

9. Practical Mini Project

Here is a tiny score tracker that shows how const and let work together in one realistic script.

const playerName = "Mina";
let score = 0;
const bonusPoints = 5;

score = score + bonusPoints;

console.log(playerName + " scored " + score + " points");

This example uses const for values that stay fixed and let for the score that changes. That is the basic pattern you should aim for in everyday JavaScript.

10. Key Points

Use const by default for values that do not need reassignment.
Use let when the variable must change later.
Avoid var in new code because its function scope can create confusing bugs.
const protects the binding, not the deep contents of arrays or objects.
Block scope with let and const is usually easier to maintain than function scope with var.

11. Practice Exercise

Rewrite the following idea using the right declaration keyword for each variable:

A username that never changes after it is loaded.
A login attempt counter that increases after each failed attempt.
A temporary message inside an if block.

Expected output: the username stays constant, the counter increments, and the temporary message is only available inside the block.

Hint: Ask whether each variable needs reassignment. If not, use const. If yes, use let.

Solution:

const username = "Sam";
let attempts = 0;

if (true) {
  const message = "Try again";
  console.log(message);
}

attempts = attempts + 1;

console.log(username);
console.log(attempts);

12. Final Summary

In modern JavaScript, const and let are the preferred ways to declare variables because they are easier to read and safer to use than var. The main idea is simple: use const when a variable should not be reassigned and let when it should.

var still exists for compatibility with older code, but it introduces function scope and looser behavior that often make code harder to debug. If you follow the rule “prefer const and let over var,” your JavaScript will usually be more predictable and maintainable.

As a next step, practice rewriting old var declarations in simple scripts. That habit will help you internalize scope, reassignment, and the difference between stable and changing values.