Since ES6 was released, ES6 has brought some new features and methods to JavaScript . For JavaScript developers, these features can greatly improve our workflow and work efficiency. Among them are the Object.freeze() method and const .
Some developers, especially novices, think that these two functions work the same way, but they are not. Let me tell you how Object.freeze() is different from const .
Summary
const and Object.freeze() are completely different.
- const behaves like let. The only difference between them is that const defines a variable that cannot be reassigned. Variables declared by const have block-level scope, not variables declared by var have function scope.
- Object.freeze() accepts an object as a parameter and returns the same immutable object. This means that we cannot add, delete or change any properties of the object.
The properties of mutable objects can be changed, while the properties of immutable objects cannot be changed after the object is created.
example
const
const user = 'Bolaji Ayodeji'
user = 'Joe Nash'This example will throw an Uncaught TypeError, because we are trying to reassign the variable user declared with the const keyword, which is invalid.
In this example, using let or var declarations can work, but using const does not.
const problem
The object declared with const can only prevent its reallocation, but it cannot make the declared object immutable (can prevent its properties from being changed).
Referring to the following code , we use the const keyword to declare a variable and assign an object named user to it.
const user = {
first_name: 'bolaji',
last_name: 'ayodeji',
email: '[email protected]',
net_worth: 2000
}
user.last_name = 'Samson';
// this would work, user is still mutable!
user.net_worth = 983265975975950;
// this would work too, user is still mutable and getting rich :)!
console.log(user); // user is mutated
Although we cannot reassign this variable named user, we can still change the object itself.
const user = {
user_name: 'bolajiayodeji'
}
// won't work
We definitely want the object to have properties that cannot be modified or deleted. const cannot achieve such a function, but Object.freeze can.
Object.freeze()
To disable any changes to the object, we need to use Object.freeze().
const user = {
first_name: 'bolaji',
last_name: 'ayodeji',
email: '[email protected]',
net_worth: 2000
}
Object.freeze(user);
user.last_name = 'Samson';
// this won't work, user is still immutable!
user.net_worth = 983265975975950;
// this won't work too, user is still immutable and still broke :(!
console.log(user); // user is immutated
Objects with nested properties are not actually frozen
Object.freeze is just a shallow freeze. When encountering objects with nested properties, we need to recursively Object.freeze to freeze objects with nested properties.
const user = {
first_name: 'bolaji',
last_name: 'ayodeji',
contact: {
email: '[email protected]',
telephone: 08109445504,
}
}
Object.freeze(user);
user.last_name = 'Samson';
// this won't work, user is still immutable!
user.contact.telephone = 07054394926;
// this will work because the nested object is not frozen
console.log(user);
Therefore, when an object has nested properties, Object.freeze() does not completely freeze the object.
To completely freeze objects with nested properties, you can write your own library or use an existing library to freeze objects, such as Deepfreeze or immutable- js
in conclusion
const and Object.freeze() are not the same, const is to prevent variables from being reallocated, and Object.freeze() is to make objects immutable.