Javascript Execution Context

Photo by Federica Galli on Unsplash

Everything in JavaScript happens inside the Execution Context. Execution Context is like a container in which the whole JavaScript code gets executed. Execution Context has two-component in it:

1. Memory Component(Variable Environment): This is the place where all the functions and variables get stored as key-value pairs.
2. Code Component(Thread of Execution): This is the place where all the code gets executed one line at a time.

Now we know that when we run a program an Execution Context is formed. Let’s explore the Execution Context with an example:

When we run this program a Global Execution will be created. There are two phases in creating an Execution Context, the first phase is the Memory Creation Phase and the second one is the Code Execution Phase. In the Memory Creation phase, JavaScript skims through the program and allocates memory for all the variables and functions. In the case of a variable declared with var JavaScript engine initializes with the value undefined, and in the case of a function, the JavaScript engine will store the whole function. In case of the variable declared with let or const JavaScript allocates memory for variables but doesn’t initialize with any value.

After the Memory Execution Phase, our Memory Component would look like this:

n: undefined
square: { 
            var answer: num * num;
            return answer;
        }
square2: undefined
square4: undefined

After the Memory Creation phase Code Execution will take place. In the Code Execution phase, the JavaScript engine will once again go through the code and execute the program. Since JavaScript is a single-threaded synchronous language it can only execute one command at a time and it can execute the next command once it’s done with the current one.

When JavaScript runs the first line it will change the value number from undefined to 2. After the first line, the JavaScript engine will move to line 6 as there is nothing to execute. On line 7 we have a function call and on function execution, the JavaScript engine creates a Local Execution Context or Functional Execution Context. Just like global context, local context will also have two components (memory component & code component) and will also go through the two-phase execution(memory execution & code execution). As a new execution context is created JaveScript engine will first process this newly made local execution context and resume the previous execution context where is left off, in this case, a new execution context is formed on line 7 so once the local execution context finishes JavaScript engine will resume the previous execution context from line 8.

Do note that since it is a local execution context, we will be only concerned about the square function i.e. the code we will be concerned about:

(num) {
    var answer = num * num:
    return answer;
}

Now in the memory execution phase of local execution JavaScript engine will go through the code and assign the value to the variable and function, since we don’t have any function here, the value will only be assigned to the variable. Here we have two variable num & answer which will be the value of undefined in the memory execution phase.

After the memory creation phase, the code execution phase will start. On line 2 JavaScript will set the value of num to 2, as the value of number is 2 in the global context. Then JavaScript engine will move to line 3 where it will assign the value of answer to 4 i.e. 2 * 2. On the next line i.e. line number 4 we have return, now when the JavaScript engine encounters the return keyword, it will give control with value to the context where the function was executed and the instance of local context will be deleted.

Since the control has moved to the global context so for line 7 value square2 will be assigned 4 from undefined. Now we will move on to the global context, on line 8 we have a function so just like line 7 again a local execution context will be formed and will go through two phases of execution context and we would get the value of square4 . Now there is nothing to execute in the global context our global context will also get deleted.

To keep track of all execution contexts, the JavaScript engine uses a data structure named Call Stack. Call Stack works on the LIFO principle i.e. last-in-first-out. So when we run a program JavaScript engine creates a global execution context and puts it on the top of the call stack, now if there is a function in our program JavaScript engine creates a local execution context and puts it on the top of the call stack and start executing the function, if there is another function inside the function JavaScript engine will create another local context and put it on the top of the stack and start executing. The JavaScript engine will first complete the context which is on the top of the stack and pop it off from the stack and execute the next context and pop it off from the stack after completion. The JavaScript engine will keep doing this until the call stack gets empty.

This was the Execution Context in JavaScript, thank you so much for taking the time to read this blog. 👊🏻 see ya!

Resources: JavaScript Tutorial Akshay Saini