JavaScript Constant Variables Guide

Constants are a key part of writing clean JavaScript code. They help you store values that should not change. This guide will teach you everything about JavaScript constant variables.

We will cover what constants are, how to use them, and common mistakes. You will see clear examples and code snippets. By the end, you will be confident using const in your projects.

What is a Constant Variable?

A constant variable holds a value that cannot be reassigned. In JavaScript, you declare a constant with the const keyword. Once you assign a value, you cannot change it later.

This is different from let or var. Those allow reassignment. Constants are perfect for values that must stay the same, like configuration settings or API endpoints.

Remember: a constant is not immutable. The variable binding is constant, but the value itself can be changed if it is an object. We will explain this later.

Declaring a Constant

To declare a constant, use the const keyword followed by the name. You must assign a value immediately. You cannot declare a constant without an initial value.

// Correct way to declare a constant
const MAX_USERS = 100;
const SITE_NAME = "My Blog";

// This will cause an error
// const ERROR_VAR; // SyntaxError: Missing initializer

Always use uppercase letters for constant names. This is a common convention. It helps other developers see that the value should not change.

For more naming rules, check our JavaScript Variable Naming Rules guide.

Constants and Scope

Constants are block-scoped. This means they only exist inside the block where you declare them. A block is defined by curly braces {}.

This is the same as let. But unlike var, constants do not leak outside the block.

if (true) {
  const BLOCK_SCOPED = "I am inside the block";
  console.log(BLOCK_SCOPED); // Works
}
// console.log(BLOCK_SCOPED); // ReferenceError: BLOCK_SCOPED is not defined

Block scoping makes your code safer. You avoid accidental variable collisions. This is a big advantage over older var declarations.

Learn more about scopes in our JavaScript Variable Scope Explained article.

Reassigning Constants

You cannot reassign a constant. If you try, JavaScript throws a TypeError. This is a common mistake for beginners.

const PI = 3.14159;
// PI = 3.14; // TypeError: Assignment to constant variable.

Always remember: once a constant is set, that binding is permanent. This rule helps prevent bugs where values change unexpectedly.

Constants with Objects and Arrays

Here is an important nuance. If a constant holds an object or array, the variable cannot be reassigned. But the contents of the object or array can be modified.

// Constant object
const USER = { name: "Alice", age: 25 };
USER.name = "Bob"; // Allowed: changes the property
console.log(USER); // { name: "Bob", age: 25 }

// USER = { name: "Charlie" }; // TypeError: Assignment to constant variable.

// Constant array
const COLORS = ["red", "green", "blue"];
COLORS.push("yellow"); // Allowed: modifies the array
console.log(COLORS); // ["red", "green", "blue", "yellow"]

// COLORS = ["black"]; // TypeError: Assignment to constant variable.

This behavior is important. If you want to prevent changes to the object itself, use Object.freeze(). But that is a deeper topic.

When to Use Constants

Use constants by default. Only use let when you know the value must change. This is a modern best practice.

Here are good use cases for constants:

• Configuration values like API URLs
• Mathematical constants like PI
• Enum-like values for states
• References to DOM elements that do not change

Using constants makes your code more predictable. It tells other developers that this value is fixed.

Common Mistakes with Constants

Beginners often make these mistakes. Avoid them to write better code.

Mistake 1: Trying to redeclare a constant. You cannot redeclare a constant in the same scope.

const NAME = "John";
// const NAME = "Jane"; // SyntaxError: Identifier 'NAME' has already been declared

Mistake 2: Forgetting to initialize. Always assign a value when you declare a constant.

// const AGE; // SyntaxError: Missing initializer in const declaration

Mistake 3: Assuming objects are immutable. As shown above, object properties can change. Use Object.freeze() if needed.

Constants in Loops

You can use constants inside loops. But be careful with the loop variable. For example, in a for loop, you cannot use const for the incrementing variable.

// This works fine
const ITEMS = ["a", "b", "c"];
for (const item of ITEMS) {
  console.log(item); // a, b, c
}

// This will cause an error
// for (const i = 0; i < 5; i++) { } // TypeError: Assignment to constant variable.

In the for...of loop, each iteration creates a new constant. This is safe and efficient.

Constants and Temporal Dead Zone

Constants are hoisted but not initialized. This creates a temporal dead zone (TDZ). You cannot access a constant before its declaration.

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

This is different from var, which is hoisted and initialized to undefined. The TDZ helps catch errors early.

Constants vs. let vs. var

Here is a quick comparison:

• const: Block-scoped, cannot be reassigned, must be initialized.
• let: Block-scoped, can be reassigned, can be declared without value.
• var: Function-scoped, can be reassigned, can be hoisted with undefined.

Always prefer const first. Use let only when you need to reassign. Avoid var in modern code.

For a deeper dive, read our JavaScript Variable Declaration Guide.

Constants in HTML

You can use constants in HTML with JavaScript. For example, store a reference to a DOM element in a constant.

// In a script tag or external file
const HEADING = document.querySelector('h1');
HEADING.textContent = "Welcome!";
// HEADING = document.querySelector('h2'); // TypeError: Assignment to constant variable.

This ensures the reference stays the same. The element's properties can still change. This is a safe and common pattern.

See our guide on JavaScript Variables in HTML for more examples.

Conclusion

JavaScript constant variables are a powerful tool. They make your code safer and easier to understand. Use const by default for all values that should not be reassigned.

Remember the key rules: declare with initial value, cannot reassign, block-scoped, and object contents can change. Practice using constants in your projects.

Start with small examples. Soon, using constants will become second nature. Happy coding!