The defect of the var

Before we get to let and const, let’s take a look at what makes var fun.

There is only functional scope and global scope for variables declared by var.

This wide scope is not very friendly to if and for syntax. Consider the following code:

You want to get -1 but accidentally get the second I variable declared in the for block.

We can also see from the above code that the second var has the disadvantage of being able to declare the same variable repeatedly in a scope

For example, in the code below,indexWill be declared repeatedly, and JS does not report an error.

Var’s ability to duplicate declarations makes it very easy to break existing variables. You might be careful not to duplicate declarations when code is small, but when code is large, accidentally duplicate declarations are inevitable.

Var also has a confusing mechanism: variable promotion, where a variable can be used before it is declared and has a value of undefined

Js will push var a to the top of the scope first, and then perform assignment a = 1 when it reaches the original code location.

Because of the anti-human design of var, new ways of declaring variables, let and const, have emerged since ES6

let

Let is a new ES6 syntax for declaring variables as an alternative to var

Let, as ES6’s new way of declaring variables, is bound to fix the flaws of traditional var.

Remember the main characteristics of lets and const

  • Block-level scope
  • Cannot duplicate declaration
  • No variable promotion
  • Temporary dead zone

What is block-level scope

Var is a functional scope and a global scope. What is a block-level scope?

Let’s break it down: “block level” + “scope”

Scopes are familiar, so what is a block?

A block is a block of code, enclosed by a pair of curly braces.

Block-level scope

The variables declared by the LET are block-level scoped; in other words, the variables declared by the let are scoped in the same code block in which they are declared

The variable cannot be accessed outside the block (scope) in the same way that variables declared by var cannot be accessed outside the function and variables declared inside the function.

Cannot duplicate declaration

Not available in a scopeletDeclare the same variable repeatedly.

This avoids overwriting variables as much as possible.

There is no variable promotion

As mentioned above, the variable promotion mechanism of var, while the variable declared by let must be declared before being used, otherwise an error will be reported.

Temporary dead zone

Before we get into temporary dead zones, let’s look at this interesting piece of code

Since var is promoted, the second TMP overrides the first TMP variable when promoted, and the final output is ABC.

But let’s try to replace var with let

Error: Cannot access ‘TMP’ before initialization

Because the TMP variable declared by the let in the if block “binds” the region, it is no longer affected by external influences. Therefore, TMP cannot be accessed before declaration, even if there is a variable of the same name in the scope chain. This is the temporary dead zone

After understanding, let’s change it this way so that we can’t report mistakes

conclusion

Let was designed as an alternative to VAR, so it fixes many of the flaws of VAR, and one rule to keep in mind when using let is declare first, use later

const

Basic usage

Const is also new in ES6 and is used to declare a constant.

Const, like let, has block-level scope and cannot be declared repeatedly.

Because const declares a constant, it should be assigned (initialized) at declaration time, rather than declared and then assigned, as let does.

Variables declared by const cannot be reassigned.

nature

Const is not intrinsically a guarantee that the value will not change, but that the memory address to which the variable points will not change.

To understand this, you probably need to understand what primitive types and reference types are

There is a section on primitive types and reference types in JavaScript Advanced Programming Edition 4, which is recommended reading

A variable in JS is essentially a pointer, pointing to a block of memory address. For primitive types, the block of memory that the variable points to holds its value. Therefore, the memory address that the variable points to remains unchanged, so the value of the variable will not change.

In the case of Object, however, the memory address to which the variable points holds only a pointer to the actual data. Therefore, const guarantees that the address to which the variable points is fixed, but does not guarantee that the pointer to which the variable points is fixed. Therefore, there is no guarantee that the value of the reference type will not change.

reference

Part of the content is from

Net – ES6

JavaScript Advanced Programming Edition 4