How Javascript Really Works - Part 1

Javascript is becoming more and more well-known and famous throughout the last years, since modern applications, from web to desktop applications and in general, any kind of application, use a huge amount of it. Thus, it has drawn the attention of more and more developers across the world.

One major advantage of Javascript, is that you can start learning it very easily and fast. But exactly this advantage is what makes developers daily fail to perform at their jobs. This advantage, drives a lot of developers to miss the opportunity to learn how Javascript really works. There is no any difficulty to learn how to declare a variable, assign a value to it and then built a function that uses that variable. The real difficulty, lies, under all the visible things that developers portray in their monitors. So, how exactly Javascript run and executes our code?

We will begin this series of ‘How Javascript Really Works’, starting with the Engine, Compiler and Scope.

1. The Engine has one task: to compile and execute our Javascript program from start to finish.
2. The Compiler is responsible for parsing and code-generation.
3. The Scope sets a ‘space limit’ for the Compiler, in order for him to know which ‘things’ he needs to compile.

Actually, there is a lot of talking between these three entities. They ask and answer questions to each other all the time. For instance, let’s assume we type let a = 5. How will the Engine proceed?

Well, as simple as this may seem, it is not a single or straightforward task. At first, the Engine sees two different tasks, all handled by the Compiler. The Compiler will,

1. Begin with the left-hand side part of the assignment operation, let a. He then, will talk to the Scope to see if there is a variable inside that particular scope, named a. If there is such a variable, the Compiler will ignore the declaration and will proceed to the next task. If not, he will tell to the Scope to declare a new one named a.
2. After that, the Compiler will produce the code that the Engine will execute. That code, tells the Engine to ask the Scope if there exists inside him a variable named a. If there exists, the Engine will use it. If there does not exist, the Engine will search somewhere else (see below).

After these two tasks, the Engine will have the variable a it needs and then will assign to it the value 5.

Let’s now take a closer look at Scope. The Scope, does much more than setting the ‘space limit’ for the Compiler. The Scope, composes the rules of where and how a variable can be found. The first scope we find in our code, is the Global Scope, where, in this scope, our entire code is placed. The next kind of scope we can find, is the Function Scope. This scope contains the entire logic of our function. Let’s take a look in the following snippet,

const a = 5;

function printInConsole(b) {
    let c;
    c = 2 * b;
    console.log(b+c);
};

printInConsole(3);

We see here, that, the variable a is being declared in the Global Scope. The curly braces that contain the logic of our function, printInConsole, set the function’s scope. So, we see that the scope of our function is nested in the Global Scope. Thus, now, we can introduce the concept of Nested Scope, which, after all, is scopes inside other scopes. But now, the Engine has some more complicated work to do, when there are nested scopes.

As mentioned before, after all the variable declarations, the Engine, will go get them and assign to them the values specified by the rules of the Compiler. If the Engine can’t find a variable in the Global Scope, then it proceeds to find it, in the nested scopes.

Conclusion

Knowing what you type and how your code is being read by the Javascript engine, will give you a huge advantage when the complexity of your application will grow and things will start to get more and more perplexed. Thus, building a strong Mental Model, is a must-have for every developer.