Understanding the concepts of JavaScript scope and block-level scope_javascript skills

Scope is always the most important thing in any programming language, because it controls the visibility and life cycle of variables and parameters. Speaking of which, first understand two concepts: block-level scope and function scope.

What is block-level scope?

Any set of statements within a pair of curly braces ({ and }) belongs to a block, and all variables defined in it are invisible outside the code block. We call it block-level scope.

The function scope is easy to understand (*^__^*). The parameters and variables defined in the function are not visible outside the function.

Most C-like languages ​​have block-level scope, but JS does not. Please see the demo below:

//C语言 
#include <stdio.h> 
void main() 
{ 
int i=2; 
i--; 
if(i) 
{ 
int j=3; 
} 
printf("%d/n",j); 
} 

When you run this code, the error "use an undefined variable:j" will appear. As you can see, the C language has block-level scope because j is defined in the if statement block, so it is inaccessible outside the block.

How does JS behave? Let’s look at another demo:

functin test(){ 
for(var i=0;i<3;i++){ 
} 
alert(i); 
} 
test();

Run this code and "3" pops up. It can be seen that outside the block, the variable i defined in the block is still accessible. In other words, JS does not support block-level scope, it only supports function scope, and variables defined anywhere in a function are visible anywhere in the function.

So how do we make JS have block-level scope? Do you still remember that variables defined in a function will be destroyed when the function is called? Can we use this feature to simulate the block-level scope of JS? Take a look at the DEMO below:

function test(){ 
(function (){ 
for(var i=0;i<4;i++){ 
} 
})(); 
alert(i); 
} 
test();

When you run it again at this time, an "i" undefined error will pop up. Haha, it has been implemented~~~Here, we put the for statement block into a closure, and then call this function. When the function call is completed , the variable i is automatically destroyed, so we cannot access it outside the block.

The closure feature of JS is the most important feature ((*^__^*) everyone knows). In JS, in order to prevent naming conflicts, we should try to avoid using global variables and global functions. So, how to avoid it? Yes, as shown in the demo above, we can put everything we want to define into a

(function (){ 
//内容 
})();

, at this time, are we equivalent to adding a function scope to their outer layer? Programs outside this scope cannot access them.