Execution Context

Execution context is where JavaScript code is executed. Every time we call a function, a function execution context is created for that function and the code of that function will be executed inside that function execution context . Global code is executed in the global execution context – which is initialized when the JavaScript program is run.

Execution context consists of 2 parts:

• Thread of execution : Goes through the code line by line and executes it line by line.
• Memory : Save data (variables) and code (function) for use.

Call Stack

The call stack helps keep track of which execution context we’re in – that is, which function is being executed. And help us determine after completing that function, where to return to continue execution. It works according to LIFO (last in first out) mechanism.

For example

Our program is as follows:

When we run the above code, a global execution context will be created with global memory , call stack now we are in global()

Next, the thread of execution goes through each line of code and executes the following in turn:

• Dòng code 1 : We declare a constant num in global memory and assign its value 3 .
• Dòng code 3 : We declare function multiplyBy2 in global memory.
• Dòng code 8 : We declare a constant output and its value is unknown now, why? Since the right side of it is multiplyBy2(num) , we solve it by calling the function multiplyBy2 and passing the argument num : 3 .

As we have learned, every time a function is called , a corresponding function execution context is created. The call stack will also do its job of keeping track of what execution context our program is in – at this point JavaScript will push multiplyBy2(3) to the call stack.

Overview right now:

We are now in the function execution context of multiplyBy2(3) , and the thread of execution continues:

• The first thing it assigns a value to the inputNumber parameter: 3
• It then executes the first line of function multiplyBy2 which declares a constant result and assigns its value inputNumber * 2 : 6
• Next with the line of code return result; :
  1. JavaScript will go to local memory and find the value of result : 6 ,
  2. Get that value return for constant output in global memory .

So that has completed dòng code thứ 8 , the function execution context above will be cleared, the call stack will now take multiplyBy2(3) off the stack and back to global() .

• Continue execution Dòng code 9 : const newOutput = multiplyBy2(10); , similarly when executing dòng code 8 :
  • multiplyBy2(10) will be pushed to the call stack
  • A corresponding function execution context is created
  • Execute line by line, and return the calculated value to newOutput in global memory

Overview right now:

So having completed dòng code thứ 9 , the function execution context above will be cleared, the call stack will now push multiplyBy2(10) off the stack and back into global() .

Since the program is completed, the global execution context will also be cleared.

End

So we’ve learned together how execution context and call stack work. In the next article we will learn about Closure .

Thank you for reading, I am learning JavaScript and writing this article, I hope to receive everyone’s suggestions to complete the article as well as leave the material for other new learners.