Understanding JS Lookups & Errors
This is a story of 2 friends(Jane & Kurt) who are communicating with each other for a better understanding of Javascript Errors.
Jane: Hello Kurt, How are you doing?
Kurt: Hi Jane, I am doing good. Recently my project got over and I must say what great learning. By the way, how is your work going on these days?
Jane: Yeah, It's going ok not that great though. I am struggling with Javascript and its concepts. I feel totally confused when I have to debug in Js. 🤯🤯
Kurt: Hey, I really like Javascript❤️, I have learned so many good things about it in my last project. You know the best thing about Javascript is, once you understand the concept of Js, you will be amazed and fall for it.
Jane: Seems like you love Javascript. I never felt like that, especially for Javascript. Javascript is very confusing for me. Will you help me in understanding few concepts?
Kurt: Everything for Javascript💕. Tell me what is the most confusing thing for you. We will start from there first.
Jane: Cool, then let’s talk about Javascript errors, why Javascript has different types of errors, e.g., ReferenceError, TypeError, etc.
Kurt: This one is simple, if you just google you will get many answers in a stack overflow. But hold on, If you read those answers you will just know when to get what errors but you will not understand how Js engine internally does this thing behind the scene. Let me try to explain how beautifully the JS engine handles the error internally. For understanding Js errors, let's first talk about Js look-ups.
When the JS engine executes the compiled code then it has to look up for each variable to check whether the variable you are using is declared or not. This look-up happen to consult JS scope. e.g.,
var a = 100;
function foo() {
let b = 10;
return a+b;
}In the above, example when the engine starts executing return a+b then it will look up for variable a and b consulting scope, i.e., checking whether a and b are declared or not, which in our case b is present in the local scope and a is the global scope.
Jane: Yeah, That much I understand that looking up for a variable is basically checking whether a variable is declared or not.
Kurt: Good, If you know, but do you know Js does 2 different types of look-ups. The type of look-up the engine performs affects the outcome of the look-up.
Jane: That’s something new, so tell me a bit more about the look-up types
Kurt: Sure, Js engine performs LHS and RHS look, I think the full form is more sort of we know that its left hand and right-hand lookup.
LHS look-up happens when variable appears on the left side of the assignment operation & RHS look-up appear on the right side (or not on the left side) of the assignment operator, that's what we understood when we hear LHS and RHS.
So, LHS you got it right but not to confuse you for RHS, you can also understand RHS as go get the value of a variable (no assignment).
1. var a = 100;
2. function foo() {
3. let b = 10;
4. return a + b;
5. }In the above example, lines 1 and 3 perform LHS look up as we don’t care what the current value of a and b instead we assign the value directly. And as per definition, variable a and b appear on the left side of the assignment operator. Line 4 concerns the current value of a and b and so it performs the RHS lookup as it's asking for go get the value of a and b.
Jane: Clear, this was easy to understand, I got the difference between LHS and RHS.
Kurt: Ok, so can you tell me how many LHS and RHS lookup happening in the below example:
1. function foo(b) {
2. console.log(b);
3. }
4. foo(4);Jane: I know Kurt, there is just 1 RHS look-up happening that's it.
Kurt: You are not completely right, yes there is one RHS look up but you miss few points here:
- line 4 is passing 4 to variable b (implicit param assignment), which is also an assignment for variable b which counts to 1 LHS.
- line 4 is saying go get the value of foo, hence 1 RHS for getting the value of foo.
- line 2 is saying go get the value for console.log, hence 1 RHS for getting the value of log method inside console object.
A total of 2 LHS and 2 RHS lookup.
So the conversation between Engine and Scope happens more like this:
Engine: Hey Scope, I have an RHS reference for foo, do you know foo?
Scope: Yes, compiler declared it as a function, You can use it.
Engine: Cool, I am executing foo then
Engine: Scope, I got an LHS look up for variable a, do you understand this variable?
Scope: Yes, It’s a formal parameter for foo, here you go.
Engine: Cool, thanks, Do you also know about console? I got an RHS reference for console.
Scope: Hey yes, it’s a built in object, what you want from it?
Engine: I was looking for log method inside console, is it there?
Scope: Yes, it’s there you can use it.
Engine: Sorry but I got an RHS reference again for a, just want to confirm whether its same formal parameter for foo, or is it changed?
Scope: No problem engine, its same you can use it. No change.
Engine: Thanks scope for resolving it for me.
Jane: Woah!! That was a long discussion that happened between engine and scope for such a small chunk of code. And I didn’t think that look-up will also be performed for functions and console.log, which is something surprising for me.
Kurt: Yes, that's why I say Js does magic internally for us. Just imagine for our long codebase, how long the scope and engine conversation would look like 🤯, which was handled by Js so nicely 🙏.
I was also amazed when I first read about how the look-up happened internally 😇.
Jane: That's all is good for theoretical knowledge Kurt, but we started discussing JS Errors why you are telling me theory, tell me something that will help us to understand errors.
Kurt: Yeah be patient I am going there 😁. So we have 3 types of Javascript errors:
- Syntax Errors
- Reference Errors
- Type Errors
I believe that Syntax errors are very much clear to most of us. So let’s discuss the other two. Time to reveal the concept 🤩🤩
Reference Error:
When the JS engine does an RHS lookup and scope tells the engine that the variable is undeclared, which results in scope resolution failure, it results in Reference Error.
Scope resolution failure in RHS look up = Reference Error
In the below example
function foo(){
return a;
}We have an RHS lookup for variable a, the engine will communicate to scope to check if the variable is declared or not as it is an RHS lookup, scope responds back to say there is no variable for named a, which result in scope resolution failure.ie., Reference error.
Note: In case of LHS lookup, if the engine found that the variable is undeclared, the scope being friendly will create one variable for the engine and will not result in Reference error, but only if you don’t use “Strict Mode” added in ES5 in your code. If “Strict Mode” is added then, LHS lookup will also result in a Reference error, similar to RHS scope resolution failure.
For example: In the below example, b is not declared anywhere in the code but still, you don’t get any reference error, because scope creates variable b even if you missed declaring it.
function foo(){
b = 15;
console.log(b);
}foo();Output: 15
But if you use strict, then you will end up getting reference errors.
use "strict"
function foo(){
b = 15;
console.log(b);
}foo();Output: Reference Error
Type Error:
When Js Engine performs an RHS look-up and scope responded positively on the look-up, after which you try to perform any illegal operation on the look-up value, it results in a type error.
When there is a successful RHS look up but an impossible action is performed on the look up outcome value = Type Error
In the below example
var c = "Hello Js"
function foo() {
return c.someFunc();
}foo();Output: TypeError
So here, the RHS lookup for variable c is successful and scope responded positively to the engine mentioning c is a variable. Now on this outcome, we are trying to perform a function call on a variable, which is not valid and hence it results in TypeError.
Jane: 😳😳 I searched a lot of places but I never exactly understood that this is happening behind the scene. Now, I understood why you explained Js look up before actually explaining the errors. This really helps 🙏🙏. I clearly understood whats the exact difference between Errors and all the lookup games.
Kurt: 😎😎. No problem at all. Let me know in case if you want to know something else we can do small catch-ups like this always 🙂.
I gathered all the points and wrote this blog to go through the concepts whenever I want to recall them. I will be happy if anyhow it helps you and incase you want more blogs on JS topics, will try out adding more. Feedbacks are always welcome 🙂🙂
