Js scope

This article references JavaScript you Don’t Know

This article will focus on the following issues:

  1. What is scope
  2. Variable lookup rule
  3. Scope in js

What is scope

For any programming language. The most basic function is to store the value of a variable and then access and modify the value. Where does this value go, and what are the rules for accessing it? This series of operations are implemented in scope.

That is to say, JS needs a set of reasonable rules to specify the storage of variables, and then it is very convenient to find this variable, this set of rules is scope

(Variable lookup rule)

There are two ways to search in JS, one is left search. One is right lookup.

What is left and what is right?

Left and right are relative, and you need to find a reference point. Namely, the left and right sides of the equal sign. Conclusion: the left side of the variable is the left search, the right side of the variable is the search. Seemingly correct, but incomplete. Consider this example:

console.log(a) 

test(2, 3)

functiong test(a, b)
Copy the code

The above code does not have an equal sign as a reference, what is the search?

Var a = b

The value of variable B is assigned to variable A. That is:

  1. Right lookup: Finds the value of a variable
  2. Left lookup: Finds this variable

practice

function foo(a) {
    var b = a
    return a + b
}

var c = foo(2)
Copy the code

Side effects (in non-strict mode)

Search left and right for a variable, working up the scope level by level, and not finding it at the bottom. What’s going to happen. The side effects here can also be understood as anomalies.

  1. Left to find side effect examples
Function foo() {a = 10} foo() console.log(a)Copy the code

10. Conclusion: When a variable is searched left, it is not found at the top level. The program will kindly create a variable for you in the global scope. This is what we call global variable leakage

  1. Find side effects examples on the right
console.log(a)
Copy the code

ReferenceError: A is not defined.

Lexical scope

Scopes work in two modes:

  1. Lexical scope
  2. Dynamic scope

Lexical scope (brief introduction)

In most programming languages, there are three stages called “compile” before code can be executed.

  1. Word segmentation/lexical analysis: program string decomposition into meaningful code segments: var a = 10 decomposition into: var, a, =, 10. These code pieces are called lexical units.
  2. Parsing/parsing: Lexical units, parsing into abstract syntax trees (AST)
  3. Code generation: Convert AST into executable code.

So the lexical scope is the scope of the definition at the lexical analysis stage. In layman’s terms: when the code is written, before it is run. The scope in which the variable belongs is determined.

Var a = 10 function foo() {console.log(a)} foo(a) // foo runs in the global scope function baz() {var a = 100 foo() // foo runs in the scope of the baz package  } baz()Copy the code

They all print 10. Foo is always in global scope because it was determined at the code writing stage. Foo doesn’t have a variable in its scope, and then it definitely goes to the global scope.

Ps: To look at this example from a dynamic scoping perspective, when you run the baz function, Foo will run in the scope of the baz wrapper. So the upper scope of baz is baz, and obviously Foo will print 100. Clearly js is not a dynamic scope.

summary

  1. Scope is a set of rules for variable lookups
  2. A left lookup is to find the variable, and a right lookup is to find the value of the variable
  3. If the variable is not found. Searching left causes global variables to leak, and searching right throws exceptions
  4. In JS, scope is lexical scope