About function priority in JS

Both function declarations and variable declarations are hoisted due to the JS compiler, but a notable detail is that functions are hoisted first, then variables.

promote

Variable and function declarations are "moved" to the top from where they appear in the code, which is called variable hoisting. Divided into two parts, the first part is to place all variable declarations and function declarations at the top of the code, and the second part of the code runs to the specified position and then executes it.

Variable promotion

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

Equivalent to

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

function boost

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

Equivalent to

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

* Note: *
Function declarations are hoisted in their entirety, function expressions are not hoisted in their entirety. Because the function expression in it is treated as a variable for hoisting, the above code is equivalent to

foo(); //会报错，但是是TypeError而不是ReferenceError
var foo = function bar(){
//代码
}


var foo;
foo();
foo=function bar(){
 //代码
}

So when the foo function is executed again, the variable foo can be found, but it is not assigned a value, so it is a TypeError

Exercise (verify the words presented at the beginning)

Knowledge point

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

Result: 2
Processing the above program will be divided into two parts, one part is processed by the compiler at compile time, and the other part is processed by the engine at runtime.

The compiler does the following processing:
1. When var a is encountered, the compiler will ask the scope whether there is already a variable with this name in the same scope set.
If it is, the compiler will ignore the declaration and continue to compile; otherwise it will ask the scope to declare a new variable in the current scope's collection, named a
2. Next, the compiler will generate the runtime The code needed to handle the assignment a=2.

example

• Example 1

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

Result: 1
because the above code will be understood by the engine as the following form

function foo(){    //函数首先会被提升
  console.log(1);
}
var foo;           //接着提升变量
foo();  //1
foo=function(){     
 console.log(2);
}

• Example 2

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

Result: 3
There is no concept of function overloading in JS, functions or variables with the same name will overwrite each other

• Example 3

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

Result: 1
First the function declaration is hoisted, then the variable declaration is hoisted

• Example 4

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

Result: 1
error TypeError

• Example 5

foo();
var a = true;
if(a){
  function foo(){console.log('a');}
}else{
  function foo(){console.log('b');}
}

Answer: 'b'
because JS is not scoped to a code segment, but to a function. So the above code will be understood by the engine as the following form:

function foo(){
    console.log('a');
}
function foo(){
    console.log('b');
}
foo();
var a = true;
if(a){
    foo();
} else {
    foo();
}

• Example 6

var a=10;
function fn(){
  if (!a) {
      var a=20
  }
  console.log(a)
}
fn()

Answer: 20

• Example 7

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

答案：TypeError: foo is not a function

• Example 8 (a bit difficult)

 var a=10;
 function fn(a,b){
    console.log(a);
    var a=10;
    console.log(a);
    function a(){}
    console.log(a);
 }
 fn(15);

Answer: function a(){}
10
10

The order of variable or function hoisting can be boiled down to this rule:


函数形参声明--->函数声明---->变量声明