Understand the difference between Object.freeze() and const in JavaScript

Related learning recommendations: javascript video tutorial

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

Among a few developers, especially newbies, some people think that these two features work the same, but NO, they are not. Object.freeze() and const work differently. Let me show you how!

Overview

const is completely different from Object.freeze().

• const behaves like let. The only difference is that it defines variables that cannot be reassigned. const Variables declared with var are block-scoped, not function-scoped, like variables declared with
var
• .
Object.freeze()

Takes an object as argument and returns the same object as the immutable object. This means that no properties of the object can be added, removed or changed.

Example

const<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const user = 'Bolaji Ayodeji'user = 'Joe Nash'复制代码</pre><div class="contentsignin">Copy after login</div></div>This will raise Uncaught TypeError because we are trying to reassign the key using const Variables declared with the word

user

. This doesn't work.

##Initially, this will work with var or let, but not const

.

Problems with const

When using objects, using const only prevents reassignment, not immutability. (The ability to prevent changes to its properties)

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: 'hi@bolajiayodeji.com',  net_worth: 2000}

user.last_name = 'Samson';// 这行得通，user仍然可变！user.net_worth = 983265975975950;// 这也行得通，用户仍然可变且变得富有 :)!console.log(user);  // user被突变复制代码

Copy after login

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

const user = {  user_name: 'bolajiayodeji'}// won't work复制代码

Copy after login

We absolutely want objects to have properties that cannot be modified or deleted. const There's no way to do that, and that's where Object.freeze()

comes to our rescue.

Look at Object.freeze()

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

.

const user = {  first_name: 'bolaji',  last_name: 'ayodeji',  email: 'hi@bolajiayodeji.com',  net_worth: 2000}Object.freeze(user);

user.last_name = 'Samson';// 这行不通，user仍然是一成不变的！user.net_worth = 983265975975950;// 这也行不通，user仍然是一成不变的，仍然无法使用 :(!console.log(user);  // user is immutated复制代码

Copy after login

Objects with nested properties are not actually frozen

Well, Object.freeze()

is a bit shallow, you It needs to be applied on nested objects to protect them recursively.

const user = {  first_name: 'bolaji',  last_name: 'ayodeji',  contact: {    email: 'hi@bolajiayodeji.com',    telephone: 08109445504,
  }
}Object.freeze(user);

user.last_name = 'Samson';// 这行不通，user仍然是一成不变的！user.contact.telephone = 07054394926;// 这将起作用，因为嵌套对象未冻结console.log(user);复制代码

Copy after login

So when Object.freeze()

has a nested property, it doesn't completely freeze it.

To completely freeze an object and its nested properties, you can write your own library or use an already created library, such as Deepfreeze or immutable-js

Summary

const differs from Object.freeze() in that const prevents reallocation, while Object.freeze()

prevents mutability.

If you want to know more about programming learning, please pay attention to the php training
column!

###

The above is the detailed content of Understand the difference between Object.freeze() and const in JavaScript. For more information, please follow other related articles on the PHP Chinese website!