Hoisting variables in JavaScript Hoisting_javascript tips

Because when I was writing this article, I was searching for information on Baidu and found an article by a garden friend. It was very well written, but I didn’t want to give up after writing it, so I took a lot of things from it! ~~

[Translation] JavaScript Scoping and Hoisting

Hope for your understanding.

One. Crime scene

Let’s look at a very simple code first:

Copy the code The code is as follows:

var v='Hello World';
alert(v);

There is no doubt about this, "Hello World" pops up. OK, let's continue.

We are looking at a piece of code:

Copy the code The code is as follows:

var v='Hello World';
(function(){
alert(v);
})()

After running, we found that it is still the same as us As expected, "Hello World" pops up.

Okay, here comes the fun part. Then look at the following code:

Copy the code The code is as follows:

var v=' Hello World';
(function(){
alert(v);
var v='I love you';
})()

If this It is an interview question. The interviewer asks you what is the result? How do you answer?

Let’s see the results first!

The result is undefined? Is it the same as what you thought above?

Okay, I won’t try to be mysterious. In fact, there is a trap hidden here - variable hoisting (Hoisting) in JavaScript;

2. In-depth analysis

Now let me explain what promotion means? As the name suggests, it means to lift things below to the top. In JS, it is to promote the stuff (variables or functions) defined at the back to the definition at the front.

Before explaining the improvement, let’s first take a look at the scoping issue in js.

Scoping is one of the most confusing parts for JavaScript newbies. In fact, not just newbies, I've met many experienced JavaScript programmers who can't fully understand scoping. The reason JavaScript scoping is so complex is that it looks very much like a member of the C family of languages. Please look at the following C program:

Copy the code The code is as follows:

#include
int main() {
int x = 1;
printf("%d, ", x); // 1
if (1) {
int x = 2;
printf("%d, ", x); // 2
}
printf("%dn", x); // 1
}

The output of this program is 1,2,1. This is because there is a block-level scope in C-series languages. When entering a block, just like an if statement, new variables will be declared in this block-level scope. These variables will not affect outer scope. But this is not the case with JavaScript. Try the following code in Firebug:

Copy the code The code is as follows:

var x = 1;
console.log(x); // 1
if (true) {
var x = 2;
console.log(x); //2
}
console.log(x);// 2

In this code, Firebug displays 1, 2, 2. This is because JavaScript has function-level scope. This is completely different from C-based languages. Blocks, like if statements, do not create a new scope. Only functions create new scopes.

For most programmers familiar with C, C#, C# or Java, this is unexpected and unwelcome. Fortunately, because of the flexibility of JavaScript functions, we have a solution to this problem. If you must create a temporary scope in a function, do it like this:

Copy the code The code is as follows :

function foo() {
var x = 1;
if (x) {
(function () {
var x = 2;
// some other code
}());
}
// x is still 1.
}

This aspect is really flexible and can be used anywhere you need to create a temporary scope, not just within a block. However, I strongly recommend that you take the time to understand JavaScript scoping. It's really powerful, and it's one of my favorite features of the language. If you understand scoping well, it will be easier to understand hoisting.

2.1 Variable promotion
Variable promotion is very simple, it is to lift the variable to the top of the function. What we need to explain is that variable promotion only promotes the declaration of the variable, and does not promote the assignment.

For example:

We define three variables:

Copy code The code is as follows:

(function(){
var a='One';
var b='Two';
var c='Three';
})()

Actually it looks like this:

Copy code The code is as follows:

(function(){
var a,b,c;
a='One';
b='Two';
c='Three';
})()

The variable is raised at this time.

Okay, let’s go back to the first piece of code now. Why is an error reported? In fact, according to our analysis based on the above variable promotion original and the scope of js (block-level scope), we know that the above code actually becomes as follows:

Copy code The code is as follows:

var v='Hello World';
(function(){
var v;
alert(v) ;
v='I love you';
})()

That's why the prompt says "undefined".

From here, we also learned that when we write js code, we need to put variables at the top of the block-level scope, such as the example I gave above: var a, b, c;. Prevent accidents.

2.2 Function lifting
Function lifting is to bring the entire function to the front.

When we write js code, we have two ways of writing, one is function expression, and the other is function declaration. It is important to note that only function declaration forms can be hoisted.

Improvement of function declaration method [successful]

Copy code The code is as follows:

function myTest(){
foo();
function foo(){
alert("I am from foo");
}
}
myTest() ;

Function expression mode promotion [failed]

Copy code The code is as follows:

function myTest(){
foo();
var foo =function foo(){
alert("I am from foo");
}
}
myTest();

The results are as follows:

An error was reported on the left. Not lying to you.

You should be able to basically understand it here. ~
Haha. .
Thank you again Beta Rabbit

Author: Lanny☆Lan Dongcai