# JavaScript const vs let vs var: Prefer const and let

Source: https://devdocs10.com/articles/javascript/js-const-let-over-var  
By Murat Bo · Published 2026-08-08 · DevDocs10 (https://devdocs10.com)

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

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.

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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.

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

Output (tested with Node 24.21.0):

```text
0
1
2
```

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.

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

Output (tested with Node 24.21.0):

```text
Inside the block
```

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`.

```javascript
const score = 10;
score = 11;
```

**Fix:** Use `let` when the value must change.

```javascript
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.

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

Output (tested with Node 24.21.0):

```text
hello
```

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

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

Output (tested with Node 24.21.0):

```text
hello
```

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`.

```javascript
let status = "loading";
let status = "ready";
```

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

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
// 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.

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

score = score + bonusPoints;

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

Output (tested with Node 24.21.0):

```text
Mina scored 5 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:**

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

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

attempts = attempts + 1;

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

Output (tested with Node 24.21.0):

```text
Try again
Sam
1
```

## 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.