Note: this paragraph is an important supplement after the editor finished writing the text. If you don’t understand this you can go back to this example after the text. As for the difference between LHS and RHS, I suddenly thought of an analogy I saw before: it is just like when you want to give money to someone, but when you can’t find the person, you give the money back to his brother (create a repayment object). After all, it is possible without further investigation, and this is LHS. But if you are a debt collector, you must find the person who owes you money. It is impossible to ask others to pay the money for him. This is RHS.

Before we look at the two types of lookup, let’s take a quick look at how compilation works.

Compilation principle

And then I’m going to use var a = 2; This program to analyze for example:

  1. In the word segmentation process, the string composed of characters is decomposed into lexical units, such as: var, a, =, 2,;
  2. This process changes the lexical unit stream into an abstract syntax tree AST (a hierarchical nested tree of elements that represents the syntax structure of the program), which looks something like this:

  1. Code generation transforms the AST into executable code. The short answer is that there’s some way to set var a=2; The AST is converted to a set of machine instructions that create a variable called A (including allocating memory, etc.) and store a value in A.

The compiler generates code during compilation, and when the engine executes it, it looks for the variable A to determine if it has been declared. The types of lookups are the two we will discuss: LHS queries and RHS queries. The lookup process requires scope assistance, but the way the engine performs the lookup affects the final result.

LHS and RHS

LHS (left-hand Side) reference and RHS (right-hand Side) reference, usually refer to the reference of the left and right sides of the equal sign (assignment operation). For example:

console.log(a);
Copy the code

The reference to A here is an RHS reference, because there is no value assigned to A, because we just want to look up and get the value of A and print it.

a = 2;
Copy the code

The reference to A here is an LHS reference, and we don’t care what the current value is, just want to find the target for the assignment operation.

We can also see from these two examples that LHS and RHS meaning “left and right of assignment” does not necessarily mean that these are the left and right of “=”. There are several other forms of assignment, so it is best conceptually understood as “who is the target of assignment (LHS)” and “who is the source of assignment (RHS).”

Let me analyze that example in the Yellow Book to help you understand

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

var c = foo(2);
Copy the code

To tell you the answer, there are 3 LHS queries and 4 RHS queries. You can pause for a moment and look for it, or you can keep reading.

LHS search:

  1. c=… , c is the target of the assignment operation, so an LHS query is required for C.
  2. The hidden a=2(implicit assignment), when foo(2) is called, the argument 2 needs to be assigned to the parameter a, so LHS query is required for a
  3. b=…. With 1,

RHS search:

  1. Foo (2), foo(2) on the right side of the assignment, needs to know the value of foo(2), so it’s an RHS query
  2. =a, a is on the right side of the assignment operation, need to know the value of A, RHS query a
  3. a… In return A +b, you need to know the values of A and B and perform RHS query on a and B respectively.

Note: As we can see from examples, if the purpose of the lookup is to assign a value to a variable, then an LHS query is used; If the goal is to get the value of a variable, RHS queries are used.

Why distinguish BETWEEN LHS and RHS

Because the two queries behave differently when the variable has not yet been declared (it cannot be found in any scope).

When performing an RHS query on a variable, the JS engine throws ReferenceError if traversing the lexical scope of the variable fails to find the variable. The JS engine raises TypeError if the variable is successfully queried but an unreasonable operation is performed on the variable, such as a function call on a value of a non-function type, or a reference to an attribute in a value of null or undefined.

When an LHS query is executed on a variable and the variable cannot be found after traversing the scope, a variable with the same name is automatically created in the global scope in non-ES5 strict mode. In ES5 strict mode, the JS engine throws the same ReferenceError as RHS when an LHS query fails.