The difference between const and Object.freeze() in javascript

This article introduces some practices of using const and Object.freeze() to define constants and configuration values ​​​​in JS, as well as their difference between.

When we define constants and configuration values ​​in JS applications. They should have the following characteristics:

• Accessible across applications
• The value of the variable should be immutable
• References to the variable should be immutable

Next, let’s look at the above three features one by one.

Using let

We use let to define variables.

let APP_NAME = "前端小智@大迁世界"

function getApplicationName() {
   APP_NAME = "他是谁？"
   return APP_NAME
}

getApplicationName() // "他是谁？"

In the above example, the function getApplicationName() changes the value of APP_NAME. How do we prevent global variables from being changed?

Use const

Can we use const to define so that the global variable will not be changed?

const  APP_NAME = "前端小智@大迁世界"

function getApplicationName() {
   APP_NAME = "他是谁？"
   return APP_NAME // 这里会抛出 TypeError 错误
}

Attempting to change the value of a variable defined using const results in this error:

"TypeError: Assignment to constant variable."

const Can you prevent variable values ​​from being changed? , see the following operation:

const fruites = ['葡萄', '哈密瓜']
fruites.push('香蕉')

console.log(fruites ) //  ["葡萄", "哈密瓜", "香蕉"]

const constants = {
  APP_NAME: "前端小智@大迁世界"
}
constants.APP_NAME = "他是谁?"
console.log(constants.APP_NAME) // 他是谁?

As can be seen from the above two examples, even if const is used, the value of the array or object can also be changed.

const does not use the value of the variable to be immutable, but the reference address of the variable to make it variable.

Now we know that in case of arrays and objects we cannot change the reference but we can change the value. How to prevent the values ​​of arrays and objects from being changed?

Use Object.freeze()

This is where Object.freeze() works, Object.freeze ignores objects and arrays value changes.

let constants = Object.freeze({
  APP_NAME: "前端小智@大迁世界"
})
constants.APP_NAME = "他是谁?"
console.log(constants.APP_NAME) // "前端小智@大迁世界"

As you can see from the example, if you change the value, it will not throw any error and it will not affect the object state.

Object.freeze() can prevent the value of the object from being changed, but it cannot prevent the change of the reference:

let constants = Object.freeze({
  APP_NAME: "前端小智@大迁世界"
})
constants = {
   APP_NAME : "Unknown App"
}
console.log(constants.APP_NAME); // "Unknown App"

To summarize:

1. const It is not allowed to change the reference of an object or array, but its value can be changed.
2. Object.freeze() Ignore value changes of an object or array

Group them together will prevent changes to the reference and value of an object or array

Using const with Object.freeze()

const constants = Object.freeze({
  APP_NAME : "Coding N Concepts"
});

constants.APP_NAME = "Unknown App"; // 这被忽略

constants = { 
  APP_NAME : "Unknown App" 
}; // 这将抛出TypeError

The above example shows that using constwith Object.freeze() is useful in JS It is very useful to define constants and configurations in .

Original address: https://codingnconcepts.com/javascript/const-vs-object-freeze/

Author: Ashish Lahoti

Translation address: https ://segmentfault.com/a/1190000038140180

For more programming-related knowledge, please visit: Programming Learning Website! !

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