Javascript Parsers and Engines

Javascript is always hosted in some environment, typically it’s hosted in a browser that is Google Chrome, Firefox, Safari etc. Javascript will run in this environment but not restricted to only this it can also run in other hosts such Nodejs web server or some application that accepts JS code input.

I will only focus on the browser. When you write your Javascript and run it there is a lot of stuff happening behind the scenes. In the browser, we have a Javascript engine that takes the code and executes it. Each browser has its own javascript engine Google Chrome has a V8 engine, Firefox has Spider Monkey and Safari has a Nitro engine, so every browser will have a JS engine.

Inside the engine the first step is to parse the code by a parser, it will read the code line by line and will check that the syntax is correct. The parser will know rules for JS to ensure this. If it finds any mistakes it will throw an error and execution will stop.

If everything is correct the parser will produce a data structure which is called Abstract Syntax Tree and that is then turned into machine code, machine code is executed directly by the computer’s processor and that is where our code runs. They are subtle differences about in the steps but these are the main steps for all.

Execution Contexts and Execution Stack

In the above section I gave you a conceptual overview and now we will talk more about the order in which the code is run.

The execution context is the environment in which Javascript is executed. Think of execution contexts like a box which contains variables and our code.

Global Execution Context (GEC):

It’s the default context. Code that is not inside any function. GEC cannot be more than one. The value of this is undefined if the code is in strict mode else it will give us a window object if it is written in a global context.

All the code that is not inside any function is in GEC. So any variables or functions, not inside the function is in GEC. GEC is an object which in case of a browser it will be a window object, everything you declare in a global context will be attached to the window object.

Execution Stack:

If the code is not inside a function it’s in GEC but what if the code is inside function, the answer is very simple it gets it’s brand new execution context.

Execution Stack is a stack data structure in which the new execution context is pushed on top of Global Execution Context. If inside the new execution context(which is a function basically) a new function is called it will create a new execution context and that new execution context is pushed on top of the previous execution context.

So now that everything is pushed onto our Execution Stack when do the items in the Execution Stack pop. It pops whenever the topmost execution context(which is a function basically) finishes its execution.

Let me explain it with an example.

At Line 1 a GEC is pushed on the stack. At Line 2 when function one is called it makes a new execution context and is pushed on top of the previous GEC on line 6 a new execution context is created and is pushed on top of the previous new context. After function two() finishes its execution. It pops out its execution context and after that function one() finishes it’s execution and pops its execution context.

Execution Contexts in Detail: Creation and Execution phases and Hoisting

In the above section, we talked about when the execution context is created and now we will talk about how it is created. An execution context can be considered as an object and this object has three properties.

Variable Object(VO):

It will contain function argument, function declaration, inner function declaration and inner variable or variable declaration. Function declaration, pointing to the function and variable declaration are commonly called Hoisting.

Scope Chain:

It contains its own variable objects as well as its parent's variables object.

“this” variable:

Based on the scope chain the value of this is initialized. If this is a bit confusing don’t worry once I explain scope chain “this” will be a lot clearer.