5 easy sentences to solve the scope of JavaScript

Each byte of a javascript program is executed in this or that execution context. You can think of these contexts as neighbors of code, which can indicate each line of code: where it comes from, and who are friends and neighbors. Yes, this is very important information, because the JavaScript society has quite strict rules that stipulate who can interact with whom. The operating context is a community with gates instead of a tiny door that is open within it.

We can usually refer to these social boundaries as scopes and have sufficient importance to legislate in the charter of each neighbor, which is the scope chain of the context we want to talk about. Within a specific neighborhood relationship, the code can only access variables within its scope chain. Compared to variables beyond its neighborhood, the code prefers to deal with local (local, i.e. local).

Any programming language has the concept of scope. Simply put, scope is the accessible scope of variables and functions, that is, scope controls the visibility and life cycle of variables and functions. The scope of JavaScript has always been a knowledge point that is difficult to understand in front-end development. Remember a few words to easily solve the scope of JavaScript.

1. "No block-level scope in JavaScript"

There is a block-level scope in Java or C#, that is, braces are also a scope.

 public static void main (){ if(1==1){ String name = "seven"; } System.out.println(name);}// Report an error

 public static void Main(){ if(1==1){ string name = "seven"; } Console.WriteLine(name);}// Report an error

No block-level scope in JavaScript

 function Main(){ if(1==1){ var name = 'seven'; } console.log(name);}// Output: seven

2. JavaScript adopts function scope

In JavaScript, each function acts as a scope, and variables in the internal scope cannot be accessed externally.

 function Main(){ var innerValue = 'seven';} Main(); console.log(innerValue); // Error: Uncaught ReferenceError: innerValue is not defined

3. JavaScript scope chain

Since each function in JavaScript is a scope, if a function nested function appears, a scope chain will appear.

 xo = 'alex'; function Func(){ var xo = "seven"; function inner(){ var xo = 'alvin'; console.log(xo); } inner();}Func();

For example, the above code appears in the scope chain composed of three scopes. If the scope chain appears, the order will appear when looking for variables. For the above example:

When console.log(xo) is executed, its search order is to search根据作用域链从内到外. If the inner layer does not exist, it will gradually look up until no exception is found.

4. JavaScript's scope chain has been created before execution

The scope of JavaScript has been created before it is executed. When it is executed in the future, you only need to search according to the scope chain.

Example 1:

 xo = 'alex'; function Func(){ var xo = "seven"; function inner(){ console.log(xo); } return inner;} var ret = Func();ret();// Output result: seven

The above code already exists before the function is called:

Global scope -> Func function scope -> inner function scope

When executing [ret();], since it refers to the inner function, the scope chain of this function has been defined as: global scope -> Func function scope -> inner function scope, so when executing [ret();], variables will be found based on the existing scope chain.

Example 2:

 xo = 'alex'; function Func(){ var xo = "eirc"; function inner(){ console.log(xo); } xo = 'seven'; return inner;} var ret = Func();ret();// Output result: seven

The above code has the same purpose as Example 1, and it also emphasizes that the scope chain already exists before the function is called:

Global scope -> Func function scope -> inner function scope

Differently, when executing [var ret = Func();], the value of the xo variable in the Func scope has been reset to "seven" from "eric", so when executing [ret();] later, you can only find "seven".

Example 3:

 xo = 'alex';function Bar(){ console.log(xo);} function Func(){ var xo = "seven"; return Bar;} var ret = Func();ret();// Output result: alex

In the above code, two scope chains have been created before the function is executed:

Global scope -> Bar function scope

Global scope -> Func function scope

When executing [ret();], ret refers to the Bar function, and the scope chain of the Bar function already exists: global scope -> Bar function scope, so when executing, it will be searched based on the existing scope chain.

5. Statement in advance

If you do not create variables and use them directly in JavaScript, an error will be reported:

 console.log(xxoo);// Error: Uncaught ReferenceError: xxoo is not defined

In JavaScript, if a value is created without assigning a value, the value is undefined, such as:

 var xxoo;console.log(xxoo);// Output: undefined in the function If written like this: function Foo(){ console.log(xo); var xo = 'seven';} Foo();// Output: undefined

The above code does not report an error but outputs undefined. The reason is that before JavaScript functions are executed, they will declare all variables in them without assigning values. Therefore, it is equivalent to the above example that the function has already executed var xo when "precompiled"; so the output of the above code is undefined.

Js is a very interesting language. Since many of its features are aimed at the operation of DOM in HTML, it seems casual and slightly less rigorous. However, with the continuous prosperity and development of the front-end and the rise of Node, Js is no longer a "toy language" or a "CSS extension" in the jQuery era. The mentioned in this article is easy to be confused or misunderstood for novices and Js developers who have gone through traditional web development. I hope this article can be helpful.