JavaScript variable Promotion Explained

JS variable Promotion

For most JS developers, variable elevation can be a very common problem, but many people may not be particularly aware of it. So here, I'd like to say a few words.

Let's start with a simple example:

a = 2;var a;console.log(a);

What do you think the above code will output? Is it output undefined? If you follow the top-down execution of the program, then this piece of code is really output undefined. However,JavaScript is not a strictly language for top-down execution .

The output of this section of code is 2, is it surprising? Why is that? The key to this problem is variable elevation (hoisting). it promotes the declaration of all variables of the current scope to the top of the program, so the above code is actually equivalent to the following code. This is not very simple and clear.

var a;a = 2;console.log(a);

So then, let's look at this example.

console.log(a);var a = 2;

What do you think the above code will output? Is it a direct report to Referenceerror? or the output 2?

In fact, the above code will output undefined. Why is it? As we said before, JS will raise the declaration of the variable to the top, but the assignment statement will not be promoted. For JS, in fact, var a = 2 is divided into two steps:

1. var A;
2. A = 2;

JS will only lift the first step to the top, so the above statement is equivalent to:

var a;console.log(a);a = 2;

Why is there a variable promotion

So why does the phenomenon of variable ascension occur?

JS, like all other languages, goes through the compile and execute phase. When JS is in the compile phase, it collects all the variable declarations and declares the variables in advance, while the other statements do not change their order, so the first step is executed at the time of compilation, and the second step is executed at the execution stage when the statement is executed.

Variable declaration

JS's variable declaration can be broadly divided into three types: var declaration, let and const declaration, and function declaration.

When a function declaration appears along with other declarations, it can cause some problems. Let's take a look at the following example.

foo();function foo() {    console.log('foo');}var foo = 2;

What do you think it's going to output? TypeError? In fact, the output of the result is foo. This leads us to the question of who should be the function declaration when it appears with other declarations. The answer is that the function declaration is above all, after all, the function is JS's first citizen.

So, what's the following example?

foo();function foo() {    console.log('1');}function foo() {    console.log('2');}

What if there are multiple function declarations? The above code outputs a result of 2. because there are multiple function declarations, the last side of the function declaration is replaced by the previous one.

Must have experienced the above example, you should already have a certain understanding of the variable declaration. Then I'll come up with a question to test.

foo();var foo = function() {    console.log('foo');}

Is this a very simple question? This question is the same as the second example above. var foo = function () {} This format is called an expression of functions.

It is also divided into two parts, part of the Var foo, and a portion is Foo = function () {}, in reference to Example 2, we can know that the result of this problem should be reported TypeError (because Foo is declared but not assigned, so foo is undefined).

We mentioned the Var declaration, the function declaration, and then let's talk about the A and const declarations. This I have written one side of the article, you can click here to see the next.

Summarize

So let's sum up.

1. JS will promote the declaration of the variable to the top of the JS execution, so for this statement: var a = 2, in fact, JS will be divided into Var a, and a = 2, two parts, and the Var a step to the top of the execution.
2. The nature of the variable boost is actually because the JS engine declares all the variables when it compiles, so all the variables are declared at the time of execution.
3. When there are multiple declarations with the same name, the function declaration overrides the other declarations. If there is more than one function declaration, all previous declarations are overwritten by the last function declaration.