JavaScript variable declaration and function declaration promotion

JavaScript variable declaration and function declaration promotion

When most people learn JavaScript initially, they mostly learn other people's code through analysis and apply it to their own projects (including me). Once the code is wrong, the problem cannot be located quickly, and the real cause of the problem cannot be fully understood. The root cause is mostly because the underlying foundation is not solid enough. Let's learn some basic knowledge of javascript together today.

1. Variable declaration promotion

Next we first look at a piece of code:

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

What should be the output?

5?

ReferenceError is still undefined

Someone would say, doesn't javascript interpret and execute line by line? When printing a, it cannot be found, and an error should be reported. But the result after running is undefined.

Why that? Here we are going to get an in-depth understanding of what javascript does before execution!

A piece of javascript code goes through three steps before being executed, collectively referred to as "compilation".

  1. Word segmentation/lexical analysis
  2. Parsing/syntactic analysis
  3. Code generation
"Compile" will happen immediately before the code is executed. The "Compile" phase will first process the declaration of variables and functions. When we see var a = 5, we may think that this is a declaration, but the JavaScript engine will actually It is treated as two parts, declaration and assignment. The declaration occurs in the compilation phase, and the assignment is in the execution phase. So the above code will be compiled as:

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

This process is like moving the variable declaration from the previous position to the top, which is called promotion.

2. function declaration promotion

Let's see if the following code can work properly:

test();
function test(){
  console.log(a);
  var a = 5;
} 

The answer is yes, because the declaration of the test function has been promoted, and the engine will parse the code as:

function test(){
  var a;
  console.log(a);//undefined
  a = 5;
}
test(); 

It should be noted here that because of the scope, the variable a is promoted to the top of the test function, rather than the top of the global. We can understand that variable declarations and function declarations will be promoted to the top of the current scope during the compilation process.

Note that function declarations will be promoted, but function expressions will not be promoted.

foo();
var foo = function(){
......
}
 

The above code will report TypeError: foo is not a function. According to the variable promotion principle, the above code will be compiled into:

var foo;
foo();
foo = function(){
......
} 

This is clear at a glance, foo is declared, but not assigned, the initial value is undefined, foo() makes a function call to undefined and causes an illegal operation, so a TypeError exception is thrown.

3. function declaration first

Variable declarations and function declarations will be promoted at compile time, but it should be noted that function declarations will be promoted first, and then variables.

Take a look at the code:

test();
var test;
function test(){
    console.log('first');
}
test = function(){
    console.log('sencond');
} 

Executing test() will print first, why? Let's take a look at the compilation process:

function test(){
    console.log('first');
}
test();
test = function(){
    console.log('sencond');
} 

We will find where the var test went? Because function declarations will be promoted first, the engine will find that test has been declared when variable declarations are promoted, so var test is ignored.

Note: Duplicate var declarations will be ignored, but function declarations that appear later will overwrite previous declarations.

Therefore, when writing a program, pay attention to avoid repeated declarations, especially when variable declarations and function declarations are in the same scope, which can save a lot of trouble!



The above are study notes and summary. If there are any errors, please point out, thank you!