Photo by Mohammad Rahmani on Unsplash

How Javascript works behind ?

Javascript is a lightweight (doesn’t eat up much memory) cross-platform (not only for web development) multi-paradigm language.

JS is one of the 3 core technologies in web development.

HTML :: Content.

CSS :: Presentation.

JS :: Dynamic effects/programming logic.

Javascript to Machine code.

Javascript files are always hoisted in some environment either in the browser or other environments like Node.

The hoisted environment has the Javascript engine that takes our code and executes it. One such is the v8 engine from Google.

Inside the javascript engine, our code will be parsed by a parser, which basically reads our code line by line and checks for syntax. This means that the parser knows how a javascript has to be written and if any error, it stops execution.

On successful parsing of our code, a data structure known as “Abstract Syntax Tree” will be produced and will be translated to machine code. This translated code is no longer a javascript.

Execution Context and Execution Stacks

All javascript code needs to run in an environment and these environments are called execution contexts.

We can think of execution contexts like a box or container which stores variables, and in which a piece of code is evaluated and executed.

The default execution context is always the global context. The global context is for variables and functions which are not inside any function.

To be precise, we can think of the global context as an object. The variables will be added as a property to the window object.

This object has 3 properties.

1. Variable Object.
2. Scope Chain.
3. “this” variable.

Each time we call a function, it gets its own brand new execution context and sits at top of the global execution context forming the execution stack and this happens in two phases.

Phases of Execution Context

Each execution context has creation and execution phases.

Creation phase

Creation of Variable Object

1. An argument object is created containing all the arguments passed into the function.
2. Code is scanned for function declarations. For each function a property is created in the variable object, pointing to the function.
3. Code is scanned for variable declarations and property is created in the variable object set to undefined.

The 2nd and 3rd points are called as hoisting in Javascript which means functions and variables are already available even before the execution phase.

Creation of Scope Chain

1. Scope means, where can we access a certain function or variable.
2. Each new function creates a new scope.
3. Lexical scoping: A function that is lexically within another function gets access to the scope of the outer function. With that, it means it gets access to the variables and functions that the parent function defines.

Creation of “this” variable

1. “this” points to the object that is calling the function.

Execution phase

The code of the function that generated the current execution context is ran line by line and all the variables are defined.

Hope you understood how javascript files are executed in detail.

See you soon!! Happy reading!!