Internal working of javascript

Internal working of javascript

Javascript is synchronous single threaded language. means it executes the code in order line by line.

how it works we will look in upcoming articles.

Before we deep dive into the execution of javascript code, let explain some pre-requisite terms.

  • Javascript Engine : javascript engine is simply a computer program that receives javascript source code and compiles into machine readable byte code that can understandable by CPU.

How code executes in javascript

For those who don't know browser natively doesn't understands high level javascript code that we write in our application. it needs to be converted into a format that browser and computers can understandable binary code.

Browser while reading through document , whenever it encounters javascript code to run via script tag. then it sends that code to javascript engine.

when javascript engine receives script file, then it create special environment called Execution Context.

  • Execution Context : it is the place where transformation and execution of javascript code takes place. it contains currently running code.

  • During the execution context run time all the code get parsed by the parser, variables and function declarations stores in memory, executable byte code will generate and code get executed.

we understood what is execution context. now let's understand how execution context creates.

There mainly two types of execution context

  1. Global Execution Context (GEC).
  2. Function Execution Context (FEC).

let's get dig deep into these

Global Execution Context(GEC)

Whenever javascript engine receives script file, it creates default execution context called Global Execution Context (GEC).

Global Execution Context (GEC) is base or default execution context. where all the code get executed except the code present inside function.

Note : For every script file there is only one Global Execution Context (GEC) will create.

Function Execution Context (FEC)

Whenever function get's called the javascript engine creates different kind of execution context called Function Execution Context (FEC).

Note : There can be a more than one Function Execution Context in single script file.

How execution context gets created.

Creation of execution context both (GEC and FEC) takes place in three stages

  1. Memory creation phase.
  2. Code execution phase.

Memory creation phase

In the memory creation phase execution context associated with execution context object (ECO). where execution context object (ECO) stores the all important data that can used by code present in the execution context during it's run time.

Memory creation phase ocuurs in three stages. in which Execution Context Object (ECO) properties are defined and set. they are

  • Creation of variable object (VO).
  • Creation of scope chain.
  • Setting value for the this keyword.

Creation of variable object (VO)

Variable object (VO) is an object like a container that stores variables and functions declarations defined within that execution context.

In Global Execution Context every variable declared with var keyword, a property is added to the VO pointing to that variable and value set to undefined.

Also, for every function declarations a property is added to Variable Object (VO) pointing to that function. and that property is stored in the memory. this means that all the function declaration stored and made accessible inside the VO, even before code starts running.

This process of storing variables and functions declarations into the memory prior to code execution called Hoisting.

Since hoisting is important concept, so dedicatedly i will write separate article on this.

Code execution phase

Finally right after memory creation phase code execution phase begins.

Until this variable object (VO) contains all the variables with value of undefined, if code get executed right here, it will return error because we can't work with undefined values.

At this point javascript engine reads code present current execution context once more, and updates variable objects (VO) values with actual values, and then code is transformed into executable byte code and then code get executed.