Detailed introduction to javascript variable hoisting (code example)

This article brings you a detailed introduction (code example) about javascript variable promotion. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Introduction

"Variable promotion" means that the declarations of variables and functions will be physically moved to the front of the code, but this is not accurate.
In fact, the location of variable and function declarations in the code will not move, but will be placed in memory during the compilation phase.

Methods to declare variables

var, let, const
Variables that are directly assigned without the above keywords will be mounted in the windows environment;

let a=9
const a=1
var a=6
c=5

Declaration of functions Method

There are two ways to declare functions in JavaScript: function declaration and function expression.

//函数声明
function say(){
    console.log('hello') 
}

//函数表达式
var say=function (){
    console.log('hello') 
}

Benefits of Hoisting

JavaScript One of the advantages of placing function declarations in memory before any code segment is executed is that this allows you to use a function before declaring it .

/*** 正确的方式：先声明函数，再调用函数 (最佳实践)*/
function catName(name) {
    console.log("我的猫名叫 " + name);
}
catName("Tigger");
/*以上代码的执行结果是: "我的猫名叫 Tigger"*/


/*** 不推荐的方式：先调用函数，再声明函数 */
catName("Chloe");
function catName(name) {
    console.log("我的猫名叫 " + name);
}
/*代码执行的结果是: "我的猫名叫 Chloe"*/

Promotion rules

Variables declared by var are only declared during promotion, and are not assigned values. The default is undefined; variables directly assigned without keywords are not promoted (demo1)

Function promotion will be promoted together with the function body and will not be executed; (deom2)

The order of pre-parsing is from top to bottom;(demo4)

The priority of functions is higher than variables, and functions The declaration is advanced to the top of the current scope; (deom3)

The variables have the same name and will not be redefined during promotion; values ​​assigned later in the execution phase will overwrite the above assignments; (demo4)

If the function has the same name, the later one will overwrite the previous one during promotion; (demo5)

The function and variable have the same name, and if the function is promoted, the definition will not be repeated, and the variable will not overwrite the function; the value assigned later in the execution phase will overwrite the previous one. assignment; (demo8)

Declaring a function with a function expression will be promoted according to the rules for declaring variables; (deom6)

When the function is executed, the variable declaration and function declaration inside the function will also be promoted according to the rules The above rules are promoted; (deom7)

let and const do not exist;(demo9, demo10)

/**demo1**/
console.log('a=',a) //a=undefined
console.log('b=',b) // Uncaught ReferenceError: b is not defined
var a=1
b=6


/**deom2**/
console.log('a=',a)  // a=function  a() {console.log("func a()")}
function  a() {
console.log("func a()")
}

/**deom3**/
console.log('a=',a) // a=function  a() {console.log("fun a")}
var a=3
var a=4

function a(){
console.log("fun a")
}
var a=5
var a=6
console.log("a=",a) // a=6



/**deom4**/
console.log('a=',a)  // a=undefined
var a =2
console.log('a=',a) //
var a =3
var a =4
console.log('a=',a) // a=4
console.log('b=',b) //b= undefined
var b='b1'


/**deom5**/
console.log('a=',a) // a=function  a() {console.log("a2")}
function a(){
console.log("a1")
}
function a(){
console.log("a2")
}
console.log('a=',a) // a=function  a() {console.log("a2")}


/**deom6**/
console.log('a=',a) // a=undefined
var a=function(){console.log('a1')}
var a=3
var a=4
var a=5
console.log(a)
var a=function(){console.log('a2')}
console.log('a=',a) // a= ƒ (){console.log('a2')}


/**deom7**/
console.log('b=',b)
var a=3
function b(i){
    console.log('a=',a)
    var a=4
    function a(){
        console.log('fun a')
    }
    console.log('a=',a)
}
b()


/**demo8**/
console.log('a=',a) //a= function a(){ console.log('fun a')}
var a=2
function a(){
    console.log('fun a')
}
console.log('a=',a) // a=2
var a=3
var a=4
var a=5
console.log('a=',a) // a=5


/**demo9**/
console.log('a=',a) //Uncaught ReferenceError: a is not defined
let a=4


/****/
<!--demo10-->
console.log('b=',b) // Uncaught ReferenceError: b is not defined
const b=5

The above is the detailed content of Detailed introduction to javascript variable hoisting (code example). For more information, please follow other related articles on the PHP Chinese website!