Hello, everyone. Hello again. I’m still the same lovable frogman.

It’s Friday again. Paddler’s day. Happy day.

Without further ado, just focus on the code

Var variable promotion mechanism

Variables that we declare using the var keyword in global or local scope will be promoted to the top of the scope. This is often called variable promotion.

Function person(status) {if (status) {var value = "frogman"} else {console.log(value) // undefined} console.log(value) // undefined } person(false)Copy the code

In the example above, the var declaration in the if code block is promoted to the top of the function. This is because the javaScript engine, when the code is precompiled, automatically promotes all var statements in the code to the top of the current scope, so the above code is parsed as below.

function person(status) {
    var value;
    if (status) {
        value = "蛙人" 
    } else {
        console.log(value) // undefined
    }
    console.log(value) // undefined
}
person(false)

Copy the code

Because of the variable enhancement in javaScript, many developers have to spend a lot of time studying the variable enhancement when they are learning the language, and sometimes a variable enhancement can cause bugs at work. So Escript6 brought us block-level declarations, so what is a block-level declaration?

  • Only variables declared under the current function are valid
  • Valid within code blocks and {} parentheses

Let the statement

Let declarations are defined in the same way as var declarations. Variables declared with a let are not promoted in the same way as var. Variables declared with a let are only valid in the current scope. Let’s rewrite the example above.

Function person(status) {if (status) {let value = "frogman"} else {console.log(value)} console.log(value) // error} person(false)Copy the code

Let is block-level scope. All outside statement blocks are not accessible. Let has no variable promotion.

Console. log(value) let value = "frogman"Copy the code

Prohibit duplicate statement

If a variable already exists in the same scope and is declared again using the let keyword, an error will be reported.

Var value = "frogman"; var value = "frogman"; var value = "frogman"; var value = "frogman" Code block declaration, no impact}Copy the code

In the example above, you can fully see that an error occurs only when a variable is declared repeatedly in the same scope.

Const statement

ECMAscript6 also provides a const keyword declaration. A const declaration refers to a constant. A constant is a value that cannot be modified once it is defined. It is also important to note that constant definitions must be initialized; if they are not, an error will be reported.

Const value = const age; // The error constant is not initializedCopy the code

Const and let

Const is not much different from let. Both are block-scoped, and const constants are valid only within the current block of code. The same variables cannot be repeated within the current scope, and there is no variable promotion.

If (true) {const name = "frogman"} console.log(nameCopy the code
Console. log(value) // Const value = "frogman"Copy the code
Let value = "frogman" const value = "frogmanCopy the code

Const declaration object

While a const variable cannot modify a pointer, it can modify a value. For example, if we define an object, we can modify the values of properties in the object, but we cannot override the entire object.

Const person = {name: "frogman ", age: 23} person. Age = 18Copy the code

Temporary dead zone

In contrast to var, let and const definitions are not promoted to the top of the scope, and even using the relatively safe Typeof can cause errors.

Console. log(typeof value) let value = "frogman"Copy the code

In the example above, console.log(typeof value) throws an error because a statement that defines and initializes a variable with a let will not be executed. The value is still in what JavaScript calls the temporal dead zone, or TDZ for short. Although JavaScript does not have a standard TDZ, it is often used to describe that variables defined by let and const do not improve.

When the JavaScript engine scans code for variable declarations, it promotes them to the top of the current scope if it encounters var, puts them in TDZ if it encounters let or const, and throws an error if it accesses a variable in TDZ. Only after the variable in TDZ is executed will it be moved out, and then normal methods can be performed. This mechanism only works in the current scope. Let’s look at the different scope cases

Console. log(typeof value) // "undefined" if (true) {let value = "frogman"}Copy the code

Variables declared as let and const are placed in TDZ, provided that they are valid only in the current scope. So console.log(typeof value) does not throw an error in the code above, and the let declaration is only valid in the current statement.

Var let const

Var variables declared in the global scope have a behavior that is mounted on the window object. It creates a new global variable as a property of the global object. This behavior may override a property of the window object, whereas variables declared in let const do not. Here’s an example.

Var value1 = "window.value2" let value2 = "window.value1" const value3 = "wang5" console.log(window.value1) // Window.value2 undefined console.log(window.value3) // undefinedCopy the code

So that’s it. See you next time.

Feel to write good words, please use your rich hands dot praise!

You can also add my wechat to communicate