Since its release, ES6 has brought several new features and methods to JavaScript. These features can better improve our workflow and productivity as JavaScript developers. These new features include the object.freeze () method and const.

Among a small number of developers, especially newcomers, there is a perception that these two functions work the same way, but NO, they don’t. Object.freeze() and const work differently. Let me show you what to do!

General situation of

Const is quite different from object.freeze ().

  • constActs likelet. The only difference is that it defines variables that cannot be reassigned.constDeclared variables are block-scoped, not function-scoped, as withvarDeclare the same variable.
  • Object.freeze()Takes an object as an argument and returns the same object as an immutable object. This means that you cannot add, delete, or change any properties of the object.

The sample

const

const user = 'Bolaji Ayodeji'
user = 'Joe Nash'
Copy the code

This will trigger aUncaught TypeErrorBecause we’re trying to redistribute the useconstKeyword declaration of variablesuser. It is invalid.

Initially, this will apply to var or let, but not const.

The problem of const

When working with objects, using const only prevents redistribution, not immutability. (Ability to prevent its properties from changing)

Consider the following code. We have declared a variable using the const keyword and assigned it an object named user.

const user = {
  first_name: 'bolaji'.last_name: 'ayodeji'.email: '[email protected]'.net_worth: 2000
}

user.last_name = 'Samson';
// This works, the user is still mutable!

user.net_worth = 983265975975950;
// this also works, users can still change and get rich :)!

console.log(user);  // User is mutated
Copy the code

Although we cannot reassign a variable named object, we can still mutate the object itself.

const user = {
  user_name: 'bolajiayodeji'
}
// won't work
Copy the code

We absolutely want objects to have properties that cannot be modified or deleted. Const can’t do this, and that’s where object.freeze () comes to our rescue.

Look at the Object. Freeze ()

To disable any changes to an Object, we need object.freeze ().

const user = {
  first_name: 'bolaji'.last_name: 'ayodeji'.email: '[email protected]'.net_worth: 2000
}
Object.freeze(user);

user.last_name = 'Samson';
// This will not work, the user is still immutable!

user.net_worth = 983265975975950;
// this also doesn't work, user is still immutable and still unusable :(!

console.log(user);  // user is immutated
Copy the code

Objects with nested attributes are not actually frozen

Well, object.freeze () is a bit shallow, and you need to apply it to nested objects to protect them recursively.

const user = {
  first_name: 'bolaji'.last_name: 'ayodeji'.contact: {
    email: '[email protected]'.telephone: 08109445504,}}Object.freeze(user);

user.last_name = 'Samson';
// This will not work, the user is still immutable!

user.contact.telephone = 07054394926;
// This will work because the nested objects are not frozen

console.log(user);
Copy the code

Therefore, when Object.freeze() has nested attributes, it does not freeze it completely.

To freeze objects and their nested properties completely, you can either write your own library or use one that has already been created, such as Deepfreeze or immutation-js. Here I provide a simple Deepfreeze implementation:

function deepFreeze(obj) {
	Object.freeze(obj);
    for(let key in obj) {
    	if(obj.hasOwnProperty(key) && typeof obj[key] === 'object') { deepFreeze(obj[key]); }}}Copy the code

conclusion

Const differs from object.freeze () in that const prevents reallocation, whereas object.freeze () prevents variability.

Original text: medium.com/@bolajiayod… Translated by Bolaji Ayodeji: Front-end Full Stack Developer