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,index
Will 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 scopelet
Declare 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