Reputation: 497
I was reading the Scopes and Closure of You don't know JS book by Kyle Simpson, specifically this topic Compiler Speak.
There they mention the LHS and RHS lookup. I am failed to understand these two terms, can anyone help me to realize them?
Upvotes: 28
Views: 11278
Reputation: 559
Don't think of it as a left hand side or right hand side assignment, think of it as storing the value into memory and retrieving it later.
For example when you type b
in the chrome developer console, it starts the RHS
lookup (retrieve the value of b
) and if the value is not found, it throws ReferenceError
.
In contrast when you type the b = 2
in chrome developer console, it starts LHS
lookup, and if b is not found in the nested scope the JS compiler declares it in the global scope (depending on whether you are running code in strict mode
or not).
For example take following code into consideration
function foo(a) {
console.log( a + b)
}
foo( 2 );
When the JS compiler executes the code it first looks for the function foo
and whether it is declared in the current scope (Hosting Environment Here) which is called RHS lookup. Now in the scope of foo the argument will be 2 and as we declared function foo(a)
when we wrote foo( 2 )
we are implicitly assigning the value 2
to a
or a = 2
, which is called LHS
lookup (assigning value 2
to a
), now fast-forward the compiler will come to line console.log( a + b)
again it will look for value a
and b
(again RHS
lookup) and if the values are found it will assign it to console.log
argument (if you assume that console.log
is defined as console.log(arg1)
in the hosting environment then arg1 = value of a+b
(which is again LHS
lookup).
In short:
• when the engine retrieves the value of a variable console.log(b)
, it gets the value from the memory location of b
. This is a RHS
lookup
• when the engine assigns the value to the variable b = 2
, it looks for the value of b
in the scope – if found, it sets the value 2
in the memory location of b
, if not, it look in the upper level scope. This is a LHS
lookup.
Upvotes: 16
Reputation: 7941
Simple example from the same book you have mentioned
function foo(a) {
console.log( a ); // 2
}
foo( 2 );
LHS : When you pass a value(2) to the foo method , compiler will assign to the parameter as a = 2 , is called LHS Lookup. It will simply find a container variable to assign the value.
RHS :In order to execute console.log to print a, need an RHS reference for the value of a. It's called RHS Lookup
Another Example
function foo(a) {
var b = a;
return a + b;
}
var c = foo( 2 );
3 LHS from the above example -**
4 RHS from the above code snippet
Edit:
Upvotes: 9
Reputation: 2905
LHS - Look for an identifier for assigning purposes or for assigning a value to it.
let foo;
// It's looking for foo identifier in global scope and assign value
// So it's an LHS
foo = 1;
// It's also LHS as it assigning new value
foo = 2;
Now, RHS - it means when you're looking for an identifier to use it (not to assign value)
function foo() {
alert(2);
}
// this look for an identifier called foo and
// in global scope it's a function decoration
// and execute it
foo();
Upvotes: 5
Reputation: 49
I think of it as follows : lhs lookup is a container lookup rhs lookup is a value lookup
I like Kyle Simpson's approach a lot but this particular nutshell explanation brought home the point loud and clear to me.
There's always a trade between "just tell what I need to know, nothing more" and drilling down to understand better at a deep level.
Sometimes that deep understanding can help you keep out of trouble, how to debug, write test code, optimize and refactor.
I am currently reading and watching a lot of Kyle's writing and online teaching, he does have knack for explaining things well. A lot of instructors lose people along the way either by going too fast because the have expertise and it's hard for them to slow down - on the other hand if you get too basic the talk gets uninteresting and you just tune out.
Upvotes: 4
Reputation: 4814
LHS look-up is done when a variable appears on the left-hand side of an assignment operation, and an RHS look-up is done when a variable appears on the right-hand side of an assignment operation.
I think of it as follows :
lhs lookup is a container lookup
rhs lookup is a value lookup
Upvotes: 16