Beginner JavaScript, talk about the understanding of variable promotion

The premise

As we all know, variable promotion and function promotion are basically the interview questions, the foundation of the foundation. So what exactly is variable promotion? In plain English, in JavaScript, function and variable declarations are always promoted to the top of the current scope. Without further ado, let’s take a look at the following examples to test the knife.

A profound

// a = 1; var a; console.log(a); // output 1 //? Output 1: undefined is not output 1: undefined is not output 1: undefined // Second small example console.log(b); var b = 2; // Do you think this example runs with an error or output 2?Copy the code

First, let’s parse the first example. The concept of executing a program from top to bottom should print undefined. However, JavaScript is not a strictly top-down language. Why do you say that? And the reason for that is the variable promotion that we talked about today. In fact, in terms of variable promotion, the first example can be viewed as the following code:

var a;
a = 1;
console.log(a);
Copy the code

That makes a lot of sense. And then let’s look at the second example, do you think it gives an error or prints 2? In fact, it does not, it will output undefined, because previously we said that the variable promotion is to promote the variable declaration, not the variable assignment, and for JS, the following code is equivalent.

var b = 2; Var b; b = 2;Copy the code

When the variable is promoted, var b is promoted to the top of the code, and the assignment statement remains the same. That’s the same thing as this

var b;
console.log(b);
b = 2;
Copy the code

So it will print undefined.

The analysis reason

To understand why, we first need to know what happens to JavaScript at runtime. When JavaScript runs, there are two phases:

1. Precompilation stage
2. Execution phase

Any code goes through a pre-compile phase before it runs, but it usually takes so little time that we’re not aware of it, and it basically creates space in memory for variables and functions. When precompiled, JS will collect all variable declarations and declare them in advance, while other statements will not change their order. Furthermore, when variables are promoted, JS will set the default value of variables to undefined and assign the function to the function body. So you can assume that after precompilation, variable declarations in the code are all promoted to the beginning of the code, leaving the rest of the code unchanged.

Gradually in-depth

Our example above only introduced variables, now let’s try to introduce functions. Let’s start with the following example

a();

function a() {
    console.log('a');
}
var a = 1;
Copy the code

What do you think it will output? Is he the same as

Var a; function a() { console.log('a'); } a(); a = 1;Copy the code

At first glance, you do not think this is undefined ah! But it still prints a. The reason for this is that when a function declaration comes along with other declarations, the function declaration is above everything else, because functions are the “first citizens” of JS. So with that out of the way, let’s look at another example.

showName()
var showName = function() {
    console.log(2);
}
function showName() {
    console.log(1);
}
showName();
Copy the code

What does it look like when it’s promoted

function showName() {
    console.log(1);
}
var showName;
showName();
 showName = function() {
    console.log(2);
}

showName();
Copy the code

ShowName = function() {console.log(1); showName = function() {console.log(1); It prints 1. Function showName() {console.log(2); function showName() {console.log(2); } function showName() {console.log(1); } override to print 2 on showName() on the last line. So its output is 1, 2. Since functions are JS’s “first citizens”, what happens when multiple functions with the same name are declared at the same time? Let’s look at the following code:

showName();

function showName() {
    console.log('a');
}

function showName() {
    console.log('b');
}
Copy the code

Its output is b. Why is that? Because when there are more than one function declaration, the last function declaration replaces the previous one.

conclusion

From the above examples, we can summarize 3 tips:

1. The so-called variable promotion (variable promotion) refers to the behavior of JavaScript engine (V8) to promote the declaration part of the variable and the declaration part of the function to the beginning of the code in JS code execution. After the variable promotion, the default value of undefined will be set to the variable and the function body will be assigned to the function.
2. In JS variable promotion, only variable declaration is promoted, so var a = 1 is generally divided into var a and a = 1. I’m just going to promote var a, a = 1.
3. When there are multiple variable declarations with the same name, the function declaration overwrites the other declarations. If there are more than one function declaration with the same name, the last function declaration overwrites all previous declarations.