Const keyword: Finally have a true constant declaration statement

Const keyword: Finally a true constant declaration statement

Hello, today uncle wants to talk with you about the new ES6 keyword — const. Before we say const, let’s talk about how we feel about const. JavaScript can finally declare true constants. Why does the uncle make such an exclamation? It is “the world bitter qin long”!

Long long ago, when you moved from the Java stack to the front-end stack, JavaScript was the first thing you had to do. It’s said that JavaScript and Java are similar in many ways, but you know how it feels when you realize you can’t declare constants? ! A programming language that can’t declare constants? ! Call yourself a programming language? !

Declare constants

All right, uncle, let’s get down to business. In fact, it is not impossible to declare constants in ES5, just a little bit awkward. You know Object has a method called defineProperty()? It’s used to define attributes for an object. In ES5 you can use this method to declare constants indirectly.

For example, if you want to declare a constant in the global scope, you can think of it as adding a property to the top-level object. Let’s take a look at a scenario where a global constant is declared in an HTML page, like this:

Object.defineProperty(window.'a', {
  value: 'a'.// Sets the value of this property
  writable: false // Sets the value of this property to be unwritable
})
Copy the code

Add an attribute named A to the window object.

console.log(a)
Copy the code

So the print is a little bit simpler, which is a. Let’s modify it again and see what happens:

a = 'b'
console.log(a)
Copy the code

The printed result is still a, without changing the value of A to B. Since writeable is whether the attribute can be written, a value of false indicates that it can only be read but not written. Therefore, property A can only be accessed and cannot be modified.

In fact, this usage is very close to the use of constants. But isn’t it weird for you? ! Why is that? Uncle to tell you:

• Now you declare a constant, using the syntax for defining attributes.
• This example is ok because it is a declared global constant that can be added towindowOn this top-level object. What if you are in a function scope and cannot find the context object? !
• Even if this method can solve the problem, it really cannot change the value. But what’s the hint? Don’t you feel bad? !
• Constants are constants and properties are properties. Not conceptually, at least, right? !

So, in the new ES6 feature, the uncle finally sees hope — const. This is what defines constants! Speaking of constants, I need to explain to you what a constant is.

A constant is simply a value that cannot be changed. In fact, not only can’t the value change, can’t repeat the assignment, can’t repeat the declaration, that’s true.

Now let’s see if const can do it:

const a = 'a'
console.log(a)
a = 'b'
console.log(a)
Copy the code

Const const const const const const const const const const const const const const

• The first print is a
• The second printed result is an error, the error content is:TypeError: Assignment to constant variable.It basically means that you’re assigning a constant as a variable.

See? ! That’s the constant. Not only can’t you change the value, but an error message will tell you that changing the value is wrong.

Considerations for declaring constants

Of course, this syntax is new in ES6, but it comes with a few caveat: when you declare a constant, you must initialize it. Unlike declaring variables, declaration and initialization can be done in two steps, such as the following:

const a
a = 'a'
Copy the code

SyntaxError: Missing initializer in const declaration SyntaxError: Missing initializer in const declaration

Look at that, how clear it is! A nail is a nail, and a socket is a socket.

Block-level scope

Again, const not only provides a way to actually declare variables, it also provides block-level scope. What? Don’t know yet? ! Take a look at the block-level scope in Let Keyword: ES6’s new Var keyword enhancement.

Here, the uncle would like to reiterate the benefit of block-level scope – that is, to restrict variables previously exposed to the global scope to a specific block-level scope. For example, code like this:

if (true) {
  const a = 'a'
}
console.log(a)
Copy the code

ReferenceError: f is not defined. That is, if you declare a constant in a block-level scope, it cannot be accessed outside the block-level scope.

Temporary Dead Zones (TDZ)

Since const constants are block-scoped, we need to mention temporary dead zones. What do you mean? Constants declared as const also have temporary dead zones.

if (true) {
  console.log(a)
  const a = 'a'
}
Copy the code

ReferenceError: Cannot access ‘a’ before initialization

The presence of a temporary dead zone means that const constants are not declared ahead of time. These two things, in fact, are the same meaning, you have to remember.

Declare a constant object or array

So we’re basically done talking about const. There’s nothing to talk about except that it can actually declare a constant. If we declare an object or array as const, can the properties of the object or the elements in the array be changed?

I don’t know, so let’s go straight to the code, and see what happens with the facts. Let’s declare an object like this:

const obj = {
  name: "Uncle who doesn't want to grow up.".age: 37
}
Copy the code

Uncle is 37 this year, but there is still a young heart. So, the uncle wants to change the age property to 18, like this:

obj.age = 18
console.log(obj)
Copy the code

This is what we get when we run the code:

{
	name: "Uncle who doesn't want to grow up.",
  age: 18
}
Copy the code

Note that the age property was successfully changed to 18! Don’t you? Doesn’t const declare a constant? Can’t constants change their values? That’s not right, is it?

It’s no use asking the third soul. We have to recognize the facts before our eyes! But why? Don’t worry, listen to uncle to tell you slowly ~

To understand this, we need to talk about JavaScript storage structures. JavaScript has two storage structures, one called “stack memory” and the other called “heap memory”. In general, the variables or constants we define are stored in stack memory. However, objects and arrays are some of the more complex types of data in JavaScript, so objects or arrays are stored like this:

Knowing this, you can probably figure out why the above code works the way it does. The value of an object declared by const cannot be changed, but the value of an object is stored at a reference address, and the properties are stored at that reference address.

Speaking of which, are you asking how to solve such a problem? Yeah, it can work out. Remember that Object provides a method called freeze()? This method is used to freeze an object. After freezing, you cannot add new attributes to the object, delete existing attributes, modify the enumerability, configurability, writability of existing attributes of the object, or modify the value of existing attributes. So, use this method to solve the problem mentioned above:

const obj = {
  name: "Uncle who doesn't want to grow up.".age: 37
}
Object.freeze(obj)
obj.age = 18
console.log(obj)
Copy the code

After that, let’s have a look at the printed result:

{
	name: "Uncle who doesn't want to grow up.",
  age: 37
}
Copy the code

The problem was solved perfectly! Wait a minute, is that really true? Uncle wants to continue the operation, such as this:

const obj = {
  name: "Uncle who doesn't want to grow up.".age: 37.skill: {
    name: "coding".year: 15}}Copy the code

What do you mean? Freeze (); freeze(); object.freeze (); Let’s try it:

Object.freeze(obj)
obj.skill.year = 20
console.log(obj)
Copy the code

Our results actually look like this:

{
	name: "Uncle who doesn't want to grow up.",
  age: 37,
  skill: {
  	name: "coding",
    year: 20}}Copy the code

Found or modified ~ this is why? The object.freeze () method can freeze only the properties of the current Object, but if the value of a property is still an Object or array, then the property is still stored at the reference address where the actual data is stored.

The solution to this problem is not too difficult, just use the object.freeze () method to freeze the Object or array properties. It works like this:

Object.freeze(obj.skill)
obj.skill.year = 20
console.log(obj)
Copy the code

The result we get is:

{
	name: "Uncle who doesn't want to grow up.",
  age: 37,
  skill: {
  	name: "coding",
    year: 15}}Copy the code

In other words, if we want to solve this problem once and for all, we can define a function that passes in an object as a parameter. Then, this function mainly uses the recursive way in the object of all the values of the object or array properties respectively frozen, exhausted can be!

Write the last words

That’s it, ES6’s new const keyword is all you want to talk about, also hope to help you. Finally say a word: I do not want to mature uncle, for the front-end learning is no longer boring, difficult and confused efforts. Do you think this is a fun way to learn about front-end technology? What are your feelings, thoughts, and good suggestions