Detailed explanation of js scope

This article mainly introduces the detailed explanation of js scope, which has certain reference value. Now I share it with everyone. Friends in need can refer to it

1.Scope in ES5

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

js What do you think this code will output? The answer is 10. Students who are familiar with Java must be a little surprised. Why is this? Because js is still different from java, 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)

This way of writing is called an Immediately Invoked Function Expression (IIFE). If you don’t understand Baidu, this actually creates a local scope. The variables declared in this scope are only within the block. Valid and cannot be accessed from outside. 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. As follows:

a=10; 
   console.log(a)

Output 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)

You can try it out, and you can also use it directly in the function without declaring the variable. Personally, I think this flexible approach is not very good. However, in ES6, it is no longer recommended to use variables without declaring them.
Then let’s do something more advanced, which is variable improvement. (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 do you guess the output is? undefined, did you answer it correctly? It doesn't matter if you are confused, let's take a look at what variable promotion is. It is very simple. In fact, it is to promote the declaration of the variable to the top of the function. In fact, the above code will become like this when the js is explained:

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 statement to the front, so the output is undefined;

2.Scope in ES6

Due to many problems in ES5, in ES6, let replaces the var declaration with let, but in order to be compatible with ES5, you can still Use previous var. However, it is still recommended to use let.
let adds a new scope to js which is the block scope. Look at the code:

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

Output a is not defined Here, we can completely use java and other syntaxes to understand the declaration of variables, and variables declared using let cannot be used in the declaration.
a=3
let 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 the
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. Of course, when he explained why, he mentioned the temporary dead zone.
.Summary (off topic)
Because ES6 has not been around for a long time, we will still encounter a lot of writing and usage of ES5, so it is important to understand JS es5 and es6, whether doing front-end or back-end Everyone has more or less contact with js. Since we have come into contact with it, we
must have an in-depth understanding of it. We can't just stop at writing functions. In addition, the front-end is no longer like before. I am still very familiar with it. I am optimistic about the development of js.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Detailed explanation of prototype in JS

How to convert pseudo array to array through js

The above is the detailed content of Detailed explanation of js scope. For more information, please follow other related articles on the PHP Chinese website!