Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
JavaScript Const
The JavaScript const declaration creates variables that cannot be reassigned to another value or redeclared later. It was introduced in ES2015 (ES6) and provides block scope like let but with immutable binding.
Syntax
const variableName = value;
Basic const Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>Const Example</h1>
<button class="btn">Try Changing const Value</button>
<p class="output"></p>
<script>
let outputEle = document.querySelector(".output");
const a = 33;
outputEle.innerHTML = "Initial value: a = " + a + "<br>";
document.querySelector(".btn").addEventListener("click", () => {
try {
a = 44; // This will throw an error
} catch (err) {
outputEle.innerHTML += "Error: " + err.message;
}
});
</script>
</body>
</html>
Key Rules for const
// Rule 1: Must be initialized at declaration
const name = "John"; // Valid
console.log(name);
// const age; // SyntaxError: Missing initializer
// Rule 2: Cannot be reassigned
const pi = 3.14159;
console.log("Original pi:", pi);
try {
pi = 3.14; // TypeError
} catch (error) {
console.log("Error:", error.message);
}
John Original pi: 3.14159 Error: Assignment to constant variable.
const with Objects and Arrays
While const prevents reassignment, object and array contents can still be modified:
const person = { name: "Alice", age: 25 };
const colors = ["red", "green", "blue"];
// Modifying object properties (allowed)
person.age = 26;
person.city = "New York";
// Modifying array elements (allowed)
colors.push("yellow");
colors[0] = "crimson";
console.log("Modified person:", person);
console.log("Modified colors:", colors);
// But reassignment is not allowed
try {
person = { name: "Bob" }; // TypeError
} catch (error) {
console.log("Error:", error.message);
}
Modified person: { name: 'Alice', age: 26, city: 'New York' }
Modified colors: [ 'crimson', 'green', 'blue', 'yellow' ]
Error: Assignment to constant variable.
Block Scope
const x = "global";
if (true) {
const x = "block"; // Different variable
console.log("Inside block:", x);
}
console.log("Outside block:", x);
// const has block scope like let
for (const i of [1, 2, 3]) {
console.log("Loop iteration:", i);
}
// console.log(i); // ReferenceError: i is not defined
Inside block: block Outside block: global Loop iteration: 1 Loop iteration: 2 Loop iteration: 3
Comparison: var vs let vs const
| Feature | var | let | const |
|---|---|---|---|
| Scope | Function | Block | Block |
| Reassignment | Yes | Yes | No |
| Redeclaration | Yes | No | No |
| Hoisting | Yes (undefined) | Yes (temporal dead zone) | Yes (temporal dead zone) |
| Must Initialize | No | No | Yes |
Best Practices
Use const by default for values that won't be reassigned. This makes your code more predictable and helps prevent accidental modifications. Use let only when you need to reassign the variable.
Conclusion
const creates immutable bindings with block scope, preventing reassignment but allowing object/array modifications. Use it as your default choice for variable declarations to write more robust JavaScript code.
Updated on: 2026-03-15T23:18:59+05:30
343 Views
Advertisements