How Js works behind the browser

In the era of computers, javascript is every where. With the use of Javascript, a developer can make a single page application to a native mobile application. Using different libraries and framework a single individual can easily put his ideas or thoughts to a application easily by the knowledge of Javascript.

Wait, Do you you know JavaScript was primarily a client-side language, meaning it runs on your computer within your browser. However, more recently the introduction of Node.js has allowed JavaScript to also execute code on servers.

Since its release, JavaScript has surpassed Java, Flash, and other languages because it is relatively easy to learn, has a free and open community, and, most importantly, is incredibly useful, allowing developers to quickly create apps with audiences in the millions.

Now comming to main topic How Js runs behind the Browser

All JS code needs to run in an environment and these environments are called execution contexts. An execution context is like a box/container which stores variables and in which a piece of our code is evaluated and executed. The default execution context is always the global context.

In the global execution context, all of the code that is not inside any function is executed. This is associated with the global object - which in the case of the browser, is the window object. Thus everything we declare in the global execution context is essentially a part of the window object. In this context, a variable lastName and window.lastName are the same thing, i.e. lastName becomes
like a property of the window object, which makes sense as properties are just variables attached to
objects. For code in functions: Each time we call a function, it gets its own brand new execution context.
Our variable assignments take place in the global execution context. Our function declarations are also stored/executed in our global context. However, when we call the function, we create a new context for the function which is placed “on top of our current context”, forming the EXECUTION STACK. Once we call the function, we switch to the Execution Context for the function and all variables within the function are stored/assigned within the Execution Context rather than the Global Context.

Multiple functions leads to multiple Execution Contexts in our Execution Stack. Once the function has completed, we say the function “returns” and the Execution Context leaves the top of
the Execution Stack.

“We see a lot of feature-driven product design in which the cost of features is not properly accounted. Features can have a negative value to customers because they make the products more difficult to understand and use. We are finding that people like products that just work. It turns out that designs that just work are much harder to produce that designs that assemble long lists of features.”
― Douglas Crockford, JavaScript: The Good Parts

Execution Contexts in Detail: Creation and Execution Phases and Hoisting.

How exactly does the creation of new execution contexts happen?

We can associate an execution context with an object - the Execution Context Object. This object has three properties:

Variable Object (VO), which will contain function arguments, inner variable declarations and functiondeclarations.
Scope chain, which contains the current variable object as well as the variable objects of all its
parents.
And the most confusing thing according to many developer:
“This” variable

When a function is called, a new execution context is put on top of the execution stack. This happens in two phases - the creation phase and the execution phase.

1. Creation phase. A) Creation of the Variable Object (VO). B) Creation of the scope chain. C) Determine value of the “this” variable.

The properties of the execution context are defined.

1. Execution phase. The code of the function that generated the current execution context is ran line by line and all the variables are defined. If it’s a global context, then it’s a global code that is executed. Creation of the Variable Object:
2. The argument object is created, containing all the arguments that were passed into the function.
3. Code is scanned for function declarations: for each function, a property is created in the VO, pointing to the function. This means that all of the functions will be stored inside of the variable object, even before the code starts executing.
4. Code is scanned for variable declarations, and for each variable, a property is created in the VO, and set to undefined. These last two points are what we refer to as “hoisting”: functions and variables are hoisted in JS, which means that they are available before the execution phase actually starts. They are hoisted in a different way though - functions are already defined before the execution phase starts, while variables are set to undefined and will only be defined in the execution phase. So each execution context has an object which stores a lot of important data that the function will use while it’s running, and this happens before the code is even executed.