- The
constkeyword, introduced in ES6 (2015), is used to declare variables that cannot be redeclared or reassigned after their initial assignment. - Variables defined with
constare confined to the block in which they are declared, similar to those declared withlet, reinforcing the principle of block scoping. - This ensures that once a variable is set with
const, its value remains constant throughout its lifecycle within that scope, promoting safer and more predictable code behavior where variables do not change unexpectedly.
Cannot be Reassigned
A variable defined with the const keyword cannot be reassigned:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p id="demo"></p>
<script>
try {
const PI = 3.141592653589793;
PI = 3.14;
}
catch (err) {
document.getElementById("demo").innerHTML = err;
}
</script>
</body>
</html>
Must be Assigned
In JavaScript, variables declared with the const keyword must be assigned a value at the time of declaration to ensure they are immediately initialized. This is crucial because const variables cannot be reassigned later.
Correct Usage:
const PI = 3.14159265359; // Correct: `PI` is initialized at declaration
Incorrect Usage:
const PI; // Incorrect: declaration without initialization
PI = 3.14159265359; // Error: `PI` cannot be assigned after declaration
When to use const?
- You should always declare a variable with
constif you expect its value not to change throughout your program. This helps maintain data integrity by ensuring that the variable cannot be reassigned to a different value or reference. - Ideal use cases for
const:- Declaring a new array
- Creating a new object
- Defining a new function
- Initializing a new regular expression
- Setting constant objects and arrays
- Understanding
const: The termconstmight imply that the value is constant, but it actually ensures that the reference to the value is constant. This distinction is important because it prevents the reassignment of the reference but not modifications to the object or array itself.
Limitations and capabilities of const:
- You cannot:
- Reassign a constant value
- Reassign a reference to a constant array or object
- You can:
- Modify the elements of a constant array
- Alter the properties of a constant object
By using const, you can ensure that identifiers are not reassigned, which helps prevent bugs and maintain the structure of your code, especially in larger, more complex applications.
Constant Arrays
When you declare an array with the const keyword, you are creating a constant reference to the array, not making its elements immutable. This means that while you cannot reassign the array to a new array or a different value, you can modify the existing elements or add new elements to the array.
Example of modifying a constant array:
const colors = ['red', 'green', 'blue'];
colors.push('yellow'); // This is allowed: adding a new element
colors[0] = 'purple'; // This is also allowed: modifying an existing element
In this example, colors remains a constant reference to the same array, but the contents of that array are freely modifiable. This flexibility allows const to be used effectively in scenarios where the structure (i.e., the array or object itself) should remain the same, but the content may change.
While you can modify the contents of an array declared with the const keyword, you cannot reassign it to a new array or a different value.
Example of what you cannot do with a constant array:
const colors = ['red', 'green', 'blue'];
// Attempting to reassign the array will throw an error:
colors = ['purple', 'orange']; // Error: Assignment to constant variable.
When you declare an object with the const keyword, like an array, you establish a constant reference to the object. However, the properties of the object can still be modified or expanded.
Example demonstrating modifications to a constant object:
// Declaration of a const object:
const car = {type: "Fiat", model: "500", color: "white"};
// Modifying an existing property:
car.color = "red"; // This is allowed: changing the property value
// Adding a new property:
car.owner = "Johnson"; // This is also allowed: adding a new property
In this example, car is a constant reference to the object {type: "Fiat", model: "500", color: "white"}. Even though the variable car cannot be reassigned to a different object or value, you can modify its properties (color) or add new properties (owner). This feature of JavaScript const provides flexibility in managing the content of objects while ensuring the stability of the reference.
While you can modify or add properties to an object declared with the const keyword, you cannot reassign it to a new object. This is because the reference to the object itself is constant.
Example of what you cannot do with a constant object:
const car = {type: "Fiat", model: "500", color: "white"};
// Attempting to reassign the object will result in an error:
car = {type: "Volvo", model: "EX60", color: "red"}; // Error: Assignment to constant variable.
This example clearly shows that any attempt to reassign car to a different object triggers an error because const ensures that the variable car always points to the same object it was initially assigned to. This rule helps prevent bugs by maintaining a consistent reference throughout the lifetime of the application, though it still allows for internal changes to the object's properties.
Difference Between var, let and const
This comparison is presented in a point format for clarity:
- var
- Scope: No block scope, only function or global scope.
- Can Redeclare: Yes, variables can be redeclared within the same scope.
- Can Reassign: Yes, the value of variables can be changed.
- Hoisted: Yes, declarations are moved to the top of their containing scope during compilation.
- Binds
this: Yes, when used in a function,varbinds to the global context or the function’s context.
- let
- Scope: Yes, has block scope, limiting access to the code block in which it's defined.
- Can Redeclare: No, variables cannot be redeclared within the same scope.
- Can Reassign: Yes, the value of variables can be changed after initial declaration.
- Hoisted: No, variables are not hoisted to the top of their block.
- Binds
this: No, does not bind its ownthis; it inheritsthisfrom the enclosing scope.
- const
- Scope: Yes, has block scope similar to
let. - Can Redeclare: No, variables cannot be redeclared within the same scope.
- Can Reassign: No, the value (or the reference) assigned at declaration is immutable.
- Hoisted: No, like
let, declarations are not hoisted. - Binds
this: No, does not bind its ownthis, similarly tolet.
- Scope: Yes, has block scope similar to
This overview provides a clear distinction between the behaviors of var, let, and const, aiding developers in choosing the appropriate declaration type based on the requirements of different use cases in JavaScript programming.
What is Good?
- let and const have block scope: Accessible only within their defined block, enhancing security and readability.
- let and const cannot be redeclared: Prevents accidental redeclaration, reducing bugs.
- let and const must be declared before use: Promotes intentional and clear usage.
- let and const do not bind to this: They inherit
thisfrom their enclosing scope, providing predictability in closures. - let and const are not hoisted: Must be declared before use, preventing runtime ordering errors.
What is Not Good?
- var does not have block scope: It is accessible outside the intended block, which can lead to unexpected behavior.
- var is hoisted: Declarations move to the top of their scope, which can cause confusion and errors if used before initialization.
- var binds to this: It can bind to the global context, leading to potential issues in certain contexts.
Browser Support
The let and const keywords, including the first versions of major browsers that provided full support:
- Google Chrome 49: Full support from March 2016.
- Microsoft Edge 12: Full support from July 2015.
- Mozilla Firefox 36: Full support from January 2015.
- Apple Safari 11: Full support from September 2017.
- Opera 36: Full support from March 2016.
Note: Both let and const are not supported in Internet Explorer 11 or earlier versions.
Block Scope
When you declare a variable with const, just like with let, it is confined to the block in which it's declared. This means that a variable named x declared inside a block is distinct from any other x declared outside that block.
Example to illustrate block scope with const:
const x = 10; // x declared in the global scope
{
const x = 2; // This x is local to the block and separate from the global x
}
// The x inside the block does not affect the x outside the block
This example shows that the x inside the block is a completely separate entity from the x outside, ensuring that each block maintains its own scope, enhancing code manageability and preventing unintended interference between variables.
Redeclaring
With var:
- You can redeclare the same variable using
varmultiple times anywhere in the same scope.
var x = 2; // Allowed
var x = 3; // Allowed
x = 4; // Allowed
From var or let to const:
- Redeclaring a
varorletvariable asconstin the same scope is not allowed.
var x = 2; // Allowed
const x = 2; // Not allowed
{
let x = 2; // Allowed
const x = 2; // Not allowed
}
With const:
- Redeclaring a
constvariable within the same scope or block is not allowed
const x = 2; // Allowed
x = 2; // Not allowed
var x = 2; // Not allowed
let x = 2; // Not allowed
const x = 2; // Not allowed
Scope Considerations for const:
- Redeclaring in Different Scopes:
- You can declare a
constvariable with the same name in different scopes or blocks.
- You can declare a
const x = 2; // Allowed
{
const x = 3; // Allowed
}
{
const x = 4; // Allowed
}
These examples illustrate how JavaScript's scoping rules apply to variable declarations with var, let, and const, highlighting the differences in redeclaration capabilities and scope isolation.
Hoisting with var
Variables declared with var are hoisted:
- This means the declaration (but not the initialization) of
varvariables is moved to the top of their containing scope. - Therefore, you can use
varvariables before they are explicitly declared in the code.
Example
carName = "Volvo"; // Assigning value before declaration
var carName; // Declaration is hoisted to the top
Hoisting with const
Variables declared with const are also hoisted:
- Similar to
var, the declaration is hoisted to the top of the scope, butconstvariables are not initialized. - Attempting to use a
constvariable before its declaration results in a ReferenceError.
Example
alert(carName); // ReferenceError: carName is not defined
const carName = "Volvo"; // Declaration is hoisted, but no initialization occurs beforehand
This distinction highlights that while both var and const experience hoisting, their behavior upon access before declaration is significantly different. Understanding these differences is crucial for effective JavaScript programming to avoid common errors like ReferenceErrors. For a deeper dive into the nuances of JavaScript hoisting, studying specialized materials on the topic is recommended.
