How Javascript Works? behind the scenes It explains how javascript is parsed in the browsers, what happens while parsing javascript in a browser

1. L E T S S E E W H A T S B E H I N D T H E
S C E N E S
PROGRAMMING | JAVASCRIPT

2. 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
Stuff happening behind the scenes

3. 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
Stuff happening behind the scenes

4. The execution context is the environment in which Javascript is executed. Think of execution contexts like a box
which contains variables and our code
when we talk about JavaScript code execution, we need to keep in mind the execution stack and scope
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 Contexts
Global Execution Context (GEC)

5. 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
The global context is located in the first position from bottom to top in the execution stack. Every time a new context is
created when a function is called, this placed at the top of the queue. Once it's executed, they are eliminated from top
to bottom
Execution Stack

6. Argument object is created, which stores all arguments (if any) in a function.
The code is scanned for function and variable declarations and creates a property in the variable object (VO) that
points to those functions and variables before execution. This process is known as hoisting
Creation of the variable object
Elevate functions and variables by making them available before execution, albeit in different ways:
• Functions: only those that are declared. It makes them fully available.
• Variables: makes them available but as undefined
Hoisting

7. Scoping is where can the variable be accessed. Each function has its own scoping space where the variables
are defined. Typically a scope is created by if for blocks but not in Javascript. New scope is created by only
writing new functions. In Javascript we also have lexical scoping for example a function inside another function will
access to its outer function
Scoping and Scope Chain

8. Each and every new execution context gets a this variable. In a regular function call “this” keyword points to
window or browser object which is a global object. Important thing to remember is that the this keyword is
not assigned a value until a function where a function where it is defined is called
Scope Chain
“this” variable
As the flow of execution is followed, a chain of scopes belonging to the object variable is created to finally create the
context object

9. The execution stack is how the function calls are placed inside the execution stack, storing their context,
while the scope chain refers to the scope of accessibility existing between the different contexts
Remember !

10. In this way, the context object is created and goes to the
second phase, which is the line-by-line execution of the
code within each context until each function call ends and
they are removed from the execution stack
Conclusion
Thank you
VIBHOR GROVER