In-depth analysis of variable scope in JS

There are two scopes of variables: global variables and local variables. This article mainly shares with you an in-depth analysis of variable scope in JS, hoping to help everyone.

Global variables

最外层函数定义的变量拥有全局作用域，即对任何内部函数来说，都是可以访问的：
    var n=10;
　　function f1(){
　　　　console.log(n);
　　}
　　f1(); // 输出10,说明全局变量n在函数内部被读取

Local variables

局部变量：在函数内部声明的变量。函数内部的变量，外部无法读取。
　function f1(){
　　　　var n=10;
　　}
　　console.log(n); // 没有定义，说明函数内部的变量，外部无法读取。

Scope in ES5

for(var i =0;i<10;i++){

}
console.log(i)

js, what do you think will be output by this code? The answer is 10. In ES5, there are only global scope and function scope, and there is no block scope. Of course, we can implement the function of block scope. Look at the following code:

(function(){
for(var i =0;i<10;i++){

}
})()
console.log(i)

The answer is 1. This way of writing is called an immediately invoked function expression (IIFE). This actually creates a local scope. The variables declared in this scope are only valid within the block. , cannot be accessed externally. The advantage of this way of writing is that it does not pollute global variables.
I would like to mention one more thing here, that is, in ES5, the declaration of variables is not strict in ES5. You can directly use a=10 to declare a global variable.                                                                                                                                                                                                                                      

a=10;console.log(a)

Outputs 10, here you can use it without declaring a variable. In fact, js has done one thing for you. It will execute the following code:

var a=undefined;a=10;console.log(a)

Then let’s do something more advanced, which is variable promotion. (Concept in ES5, new usage in ES6 will not cause variable promotion), look at the code:

a=10;
(function(){console.log(a)var a=1;
})();

What does the above code output? Let’s analyze it:

var a=undefined;
a=10;
(function(){var a=undefined;
console.log(a)
a=1;
})();

Now you understand what variable promotion means. In fact, it means bringing the declaration to the front, so the output is undefined;

Scope in ES6

for(let i=0;i<10;i++){
}console.log(a)

Output a is not defined here, and variables declared using let cannot be used in the declaration.

a=3let a =10;alert(a)

will output a is not defined, why? Ruan Yifeng's ES6 says that as long as the let command exists in the block-level scope, the variables it declares will be "binding" to this area and will no longer be affected by external influences. ES6 clearly stipulates that if there are let and const commands in a block, the variables declared by these commands in this block will form a closed scope from the beginning. Any use of these variables before declaration will result in an error.

var a, b;

(function () {
    console.log(a);// undefined
    console.log(b);// undefined

    var a = b = 0;// (1)

    console.log(a);// 0
    console.log(b);// 0
})();

console.log('window', a);// window undefined
console.log('window', b);// window 0

Related recommendations:

Detailed explanation of variable scope of include files in php

javascript variable scope, memory, DOM leaks and other issues Detailed explanation of examples

Introduction to JavaScript variable scope examples

The above is the detailed content of In-depth analysis of variable scope in JS. For more information, please follow other related articles on the PHP Chinese website!