In-depth interpretation of the Hoisting mechanism in JavaScript_Basic knowledge

hoisting mechanism

Javascript's variable declaration has a hoisting mechanism. When the JavaScript engine is executed, it will raise all variable declarations to the front of the current scope.

Look at a piece of code first

var v = "hello";
(function(){
 console.log(v);
 var v = "world";
})();

What is the result of running this code?
The answer is: undefined
This code illustrates two problems,
First, the variable v in the function scope covers the upper scope variable v. Make less changes to the code

var v = "hello";
if(true){
 console.log(v);
 var v = "world";
}  

The output result is "hello", indicating that JavaScript does not have block-level scope. Functions are the only structures in JavaScript that have their own scope.

Second, within the function scope, the declaration of variable v is promoted. So the initial code is equivalent to:

var v = "hello";
(function(){
 var v; //declaration hoisting
 console.log(v);
 v = "world";
})();  

Declaration, definition and initialization

The declaration declares the existence of a name, the definition allocates storage space for the name, and the initialization assigns an initial value to the storage space allocated by the name.
Use C to express these three concepts

extern int i;//This is a statement indicating that the name i already exists somewhere
int i;//This is to declare and define the name i, and allocate storage space for i
i = 0;//This is the initialization name i, assigning an initial value of 0
This is the case in javascript

var v;//Declare variable v
v = "hello";//(define and) initialize variable v
Because JavaScript is a dynamic language, its variables do not have a fixed type, and the size of its storage space changes with initialization and assignment. Therefore, the "definition" of its variables is not the same as that of traditional static languages, and its definition is irrelevant.

Declaration of promotion

Declarations within the current scope will be promoted to the front of the scope, including declarations of variables and functions

(function(){
 var a = "1";
 var f = function(){};
 var b = "2";
 var c = "3";
})();  

The declaration of variables a, f, b, c will be promoted to the front of the function scope, similar to the following:

(function(){
 var a,f,b,c;
 a = "1";
 f = function(){};
 b = "2";
 c = "3";
})();

Please note that function expressions are not promoted, which is also the difference between function expressions and function declarations. Let’s take a closer look at the differences between the two:

(function(){
 //var f1,function f2(){}; //hoisting,被隐式提升的声明

 f1(); //ReferenceError: f1 is not defined
 f2();

 var f1 = function(){};
 function f2(){}
})();  

The function declaration f2 in the above code is promoted, so there is no problem in calling f2 earlier. Although the variable f1 is also promoted, the value of f1 after promotion is undefined, and its real initial value is assigned when the function expression is executed. So only the statement is promoted.

Name resolution order

A name in JavaScript enters the scope in four ways, and their priority order is as follows:
1. Language built-in: all scopes have this and arguments keywords
2. Formal parameters: The parameters of the function are valid in the function scope
3. Function declaration: in the shape of function foo() {}
4. Variable declaration: in the form of var bar;

The priority of name declaration is as shown above, that is, if the name of a variable is the same as the name of the function, then the name of the function will override the name of the variable, regardless of its order in the code. However, the names are initialized in the order in which they are written in the code, and are not affected by the above priorities. Look at the code:

(function(){
  var foo;
  console.log(typeof foo); //function

  function foo(){}

  foo = "foo";
  console.log(typeof foo); //string
})();  

If there are multiple variables with the same name in the formal parameters, the last parameter with the same name will overwrite the other parameters with the same name, even if the last parameter with the same name is not defined.

There are exceptions to the above name resolution priorities, such as the ability to override the language's built-in name arguments.

Named function expression

A function expression can be given a name just like a function declaration, but this does not make the function expression a function declaration. The name of a named function expression does not enter the namespace and is not promoted.

f();//TypeError: f is not a function
foo();//ReferenceError: foo is not defined
var f = function foo(){console.log(typeof foo);};
f();//function
foo();//ReferenceError: foo is not defined
The name of a named function expression is only valid within the scope of the function.

Let’s take a look at the following example:

var myval = "my global var";
(function() {
 console.log(myval); // log "my global var"
})();

The above code will obviously output "my global var", but if we slightly modify the above code as follows:

var myval = "my global var";
(function() {
 console.log(myval); // log "undefined"
 var myval = "my local var";
})();

The execution result is that an undefined is output. The reason for this result is that the variable declaration is promoted. The above code is equivalent to the following:

var myval = "my global var";
(function() {
 var myval;
 console.log(myval); // log "undefined"
 myval = "my local var";
})();

Only the declaration part of the variable is promoted and is not initialized immediately, so undefined will be output.

However, this promotion mechanism is not only reflected in ordinary variables, but also in functions. For example, the following code cannot be executed correctly:

(function() {
 fun(); // Uncaught TypeError: undefined is not a function
 var fun = function() {
 console.log("Hello!");
 }
})();

Because it is equivalent to:

(function() {
 var fun;
 fun(); // Uncaught TypeError: undefined is not a function
 fun = function() {
 console.log("Hello!");
 }
})();

Because the declaration of the function is also hoisted and not initialized immediately, an error occurs.

Of course, this way of defining a function is called a "function expression" and there will be a promotion mechanism. If it is the following "function declaration" method, there will be no problems with the promotion mechanism at all:

(function() {
 fun();
 function fun() {
 console.log("Hello!"); // log "Hello!"
 }
})();

This is also the main difference between function declaration and function expression.