saiprasad padhy
Sai Prasad

Follow

Sai Prasad

Follow
How JavaScript Works?

How JavaScript Works?

In this blog, we will understand how code will be executed in Javascript with the help of a simple example and step by step.

saiprasad padhy's photo
saiprasad padhy
ยทDec 16, 2022ยท

3 min read

Everything in JavaScript happens inside an Execution Context.

-- Namaste JavaScript

Execution Context is further divided into two parts,

  1. Variable Environment - The place or container where all the variables and functions are stored as key: value pairs.

  2. Thread of Execution - Code will be executed line by line here.

Memory CreationCode Execution
a: 101. ___________
fn: {......}2. ___________

Let's take a simple example and see how it is executing.

var a = 10;
function sum(num){
    var ans = num + num;
    return ans;
}
var output = sum(a);

Initially, JavaScript creates a global execution context as shown in the above table.

Now, the code will be executed in two phases,

  1. Memory Creation Phase

    Memory will be created and stored in the memory block for all the variables and functions in this phase.

MemoryCode
a: undefinedvar a = 10;
sum: { var ans = num + num; return ans; }function sum(num){ var ans = num + num; return ans; }
output: undefinedvar output = sum(a);

Note: All the variables are initialized with undefined initially in this phase. for Functions, it will store the exact code inside the memory.

  1. Code Execution Phase

    Code will run line by line in this phase.

    • The 1st line will be executed, value of a will be replaced by 10 in the memory block.
MemoryCode
a: 10var a = 10;
  • When it comes to the 6th line, sum function will be Invoked and this function invocation will create a new execution context.
MemoryCode
num: undefinedFunction parameter
ans: undefinedvar ans = num + num;

It will again store all the variables and functions including parameters in the memory and start executing the code in two phases.

  • First, the parameter value will be replaced in the memory block with 10.
MemoryCode
num: 10Function Parameter
  • Now, the code will start executing line by line inside the function. The local execution context will be deleted when it reaches to return statement in the code.
MemoryCode
num: 10Function Parameter
ans: 20var ans = num + num;

Finally, the Global execution will look like the below and this will be deleted once the program is completed.

MemoryCode
a: 10Var a = 10;
sum: { var ans = num + num; return ans; }function sum(num){ var ans = num + num; return ans; }
output: 20Var output = sum(a);

Conclusion

  1. JavaScript will create an execution context before executing the code.

  2. Execution context has 2 components, Variable Environment where all the variables and functions are stored and the Thread of Execution where our code runs.

  3. All the variables are initialized with undefined initially and later those will be replaced with actual values. In the case of functions, the whole code will be stored inside the memory block.

  4. JavaScript created a new execution context while executing the function and this will be deleted once the function execution is completed.

ย 
Share this