“This is the 12th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

The front end is beautiful

When we define constants in JS, they should have the following characteristics.

1. Constant values cannot be modified 2. Constant references cannot be modified Step by step to implement these features.

Use the let

Try defining variables with let first

let APP_NAME = "Coding N Concepts";

function getApplicationName() {
  APP_NAME = "Unkown App";
  return APP_NAME;
}

getApplicationName(); // Unkown App
Copy the code

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

Use the const

We can define variables using const instead of let to prevent their value from changing.

const APP_NAME = "Coding N Concepts"; function getApplicationName() { APP_NAME = "Unkown App"; // Return TypeError APP_NAME; }Copy the code

Attempts to change a variable defined by const will throw the following error

TypeError: Assignment to constant variable.Copy the code

Let’s do another example

const fruits = ['mango', 'apple'];
fruits.push('banana');
console.log(fruits); // ['mango', 'apple', 'banana']
Copy the code
const constants = {
  APP_NAME : "Coding N Concepts"
};
constants.APP_NAME = "Unknown App";
console.log(constants.APP_NAME); // "Unknown App"
Copy the code

We can see that for arrays and objects, you can change their values even if you use const definitions. Const does not make the value of a variable immutable, but makes its binding immutable. All primitive types such as INTEGER, Boolean, and String bind data by value, while array and Object bind data by reference. From the above example, we know that although I cannot change the object and array references, we can change their values. But how can object and array values not be modified?

useObject.freeze()

This is where object.freeze () applies, which ignores changes in Object and array values

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

constants.APP_NAME = "Unknown App";

console.log(constants.APP_NAME); // "Coding N Concepts"
Copy the code

In this example, we can see that changing the value neither gives an error nor takes effect. Object.freeze() cannot change the value of Object, but it can change the Object reference.

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

constants = { 
  APP_NAME : "Unknown App"
};

console.log(constants.APP_NAME); // "Unknown App"
Copy the code

To sum up:

Const is not allowed to change a reference to object, but can change the value.

Object.freeze() does not allow you to change the value of Object, but allows you to change references to Object.

Together, they prevent both object or array values and their references from changing.

Use a combination of const and object.freeze ()

const constants = Object.freeze({ APP_NAME : "Coding N Concepts" }); constants.APP_NAME = "Unknown App"; // Will be ignored constants = {APP_NAME: "Unknown App"}; / / complainsCopy the code

As the above example shows, using a combination of const and object.freeze () is very useful for defining constants in Js.