Introduction to declaration hoisting in JavaScript (code example)

This article brings you an introduction to statement promotion in JavaScript (code examples). It has certain reference value. Friends in need can refer to it. I hope it will help You helped.

1. Overview

In JS, we take it for granted that the code is executed sentence by sentence, but this is not entirely correct.

singer = "周杰伦";
var singer; 
console.log(singer); // 周杰伦

sing();  // 故事的小黄花
function sing() {
   console.log("故事的小黄花");
}

If the above first piece of code follows the normal process, the following var singer will re-default the value to undefined, but the result is 'Jay Chou' ;

The second piece of code above will be understood to be executed first and then declared, and an error will be reported, but the result will not be.

The above code block can actually be rewritten like this:

var singer = undefined;
singer = "周杰伦";
console.log(singer); // 周杰伦
function sing() {
   console.log("故事的小黄花");
}
sing();  // 故事的小黄花

This is because:

JS definition statements, assignments and other operations will be performed during the compilation phase It is done during the execution phase.

So, there is declaration first, then assignment and execution , this is the declaration promotion of variables and functions.

2. Function declaration takes precedence over variable declaration;

var foo = "bar";
function foo() {
   
}
typeOf(foo);  // string

var foo = "bar";
function foo() {
   
}
typeOf(foo);  // string

Whether the function declaration is placed before or after the variable declaration, the variable declaration overrides the function declaration.

3. Each domain will be declared to be promoted

The following code will output 10, why?

var foo = 1;
function bar() {
   if (!foo) {
       var foo = 10;
   }
   alert(foo);
}
bar();

Because:

Every domain will be declared elevated.

The above code is equivalent to:

var foo = 1;
function bar() {
   var foo = undefined;
   if (!foo) { // !foo === true
       var foo = 10;
   }
   alert(foo);
}
bar();

4. Function expressions will not be declared to be promoted

First of all, what is a function expression?

// 函数声明
function foo() {
   console.log("函数声明");
}

// 函数表达式
var foo = function() {
   console.log("函数表达式");
}

Function expressions will not be declared to be promoted, so:

foo();  // Uncaught TypeError: foo is not a function

// 函数表达式
var foo = function() {
   console.log("函数表达式");
}

Summary

There is a mechanism to declare promotion in JavaScript, including variable declaration and function declaration. The JS engine looks for declarations for each scope at compile time, while assignments and operations occur at execution time.

Function definitions are divided into function declarations and function expressions. Function declarations have declaration promotion, but function expressions do not.

The above is the detailed content of Introduction to declaration hoisting in JavaScript (code example). For more information, please follow other related articles on the PHP Chinese website!