The concept of constant objects in JavaScript can sometimes be confusing because while the object itself is constant (meaning the reference to it cannot be changed), the properties of the object can still be modified. This behavior is often misunderstood, so let's delve into the details of how constant objects work in JavaScript, with examples.
Understanding Constant Objects in JavaScript
In JavaScript, the const keyword is used to declare constants. When used with primitive values like numbers or strings, const ensures that the value remains constant and cannot be reassigned. However, when const is used with objects, the behavior is slightly different.
Constant Object Reference
When you use const to declare an object, what you are declaring as constant is the reference to that object, not the object itself. This means that you cannot reassign the variable to point to a different object, but you can still modify the properties of the object.
Let's see this in action with an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Constant Objects in JavaScript</title>
</head>
<body>
<script>
// Declare a constant object
const person = {
name: 'John',
age: 30
};
// Try to reassign the object reference
// This will throw an error: TypeError: Assignment to constant variable
// person = {};
// Modify the properties of the constant object
person.age = 35;
person.address = '123 Main St';
console.log(person); // Output: { name: 'John', age: 35, address: '123 Main St' }
</script>
</body>
</html>
In this example, we declared a constant object person with properties name and age. Trying to reassign person to a new object (commented line) would result in a TypeError since the reference is constant. However, we can still modify the properties of the person object without any errors.
Explanation
The reason for this behavior is that objects in JavaScript are stored as references in memory. When you use const with an object, the reference to the object cannot be changed. However, the properties of the object itself, such as its keys and values, can be modified.
Immutable Properties
If you want to ensure that the properties of an object cannot be modified, you can use techniques like Object.freeze() or libraries like Immutable.js. Let's see an example using Object.freeze():
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Immutable Properties in JavaScript</title>
</head>
<body>
<script>
const person = {
name: 'Alice',
age: 25
};
Object.freeze(person); // Make the object properties immutable
// Try to modify the properties (will not throw an error, but changes won't take effect)
person.age = 30;
person.address = '456 Elm St';
console.log(person); // Output: { name: 'Alice', age: 25 }
</script>
</body>
</html>
In this example, even though we try to modify the age and address properties of the person object after freezing it, these changes won't take effect. The object remains unchanged because its properties are now immutable.
Practice Excercise Practice now