JavaScript (1) LHS query and RHS query you don't know

I plan to sort out the knowledge points in "JavaScript You Don't Know", write my own experience, and urge myself to read the book at the same time.

I will give an overall introduction first, and then give a comprehensive example at the end.

RHS queries are no different from simply finding the value of a variable, whereas LHS queries are trying to find the variable's container itself so that it can be assigned a value.

LHS query

The LHS query refers to finding the container itself of the variable so that it can be assigned a value. That is, find the target of the assignment operation.

When the LHS is queried, it will query along the scope chain. If it is found, it will assign the value to this variable. If it reaches the top of the scope and still cannot find it, it will create the variable at the top of the scope chain.

for example

var a=2;

var a=2; is equivalent to var a; a=2;

Here a is an LHS reference, we just want to find a target of assignment for 2, and don't care what the value of this target (here a) is.

Because var a; means that a has been added to the current scope, when LHS queries a, it finds a, that is, it finds the target of the assignment operation.

If there is no var a; then when LHS queries a, it will not find a, and this variable a will be created in the scope.

 

RHS query

RHS query is a common query variable value, that is, to get the value of the variable.

When the RHS is queried, it will query along the scope chain. If it is found, it will get this value and return it. If it reaches the top of the scope and still cannot find it, it will throw an error (such as TypeError, ReferenceError).

for example

console.log(a);

The a here is an RHS reference, because console.log needs to get the value of a to output the value of a.

Of course, the console.log here is also an RHS reference. Here, the RHS query is performed on the console object, and it is checked whether there is a method called log in the obtained value.

The a in the example will throw an error because it is not declared.

 

Comprehensive example

(function test() {
    a=2;
});
console.log(a);

In the example, a=2 will perform an LHS query and find that a can not be found along the scope chain. The top of the scope chain here is only the scope within the () of the test, not the global scope.

Therefore, if the variable a is not found, a variable a is created at the top of the chain, that is, within the ( ) that encloses test.

In console.log(a), when a RHS query is performed on a, it is searched along the scope chain, and a cannot be found, so an error (ReferenceError) will be thrown.

However, if executed immediately, no error will be thrown.

(function test() {
    a=2;
})();
console.log(a);

The role of the parentheses here is equivalent to opening up the scope inside () and outside (), extending the scope chain to the global scope.

That is, when a LHS query is performed on a, the top of the scope chain is the global scope.

So a will be created in the global scope, not in the () that encloses tes.

Therefore, when a RHS query is performed on a in console.log(a), a can be found in the global scope by searching along the scope chain, and the value of a can be obtained.

 

 

Understanding LHS and RHS queries is crucial to understanding scope and can help us solve many bugs.