Behind Scenes JavaScript— 1

“Everything in Javascript happens inside an execution context”

Execution context can be thought as a big box . It has two parts one is Memory component and other is Code component.

Memory Component

In memory space , every variable and function is stored as a key, value pair. It is also known as variable environment.

Code Component

Code component is the place where every line of code is executed one by one. It is also known as thread of execution.

“ Javascript is a synchronous single-threaded language”

Code Execution

It happens in two phases one is Memory Allocation Phase and other is Code Execution Phase

Memory Allocation Phase:

All the variables and functions are stored in memory. Initially all the variables are assigned special keyword undefined where key is variable name and value is undefined. Function declarations as in line 2 have value as a whole function code whereas that of line 7 have value as undefined. So memory looks like:

  1. n : undefined
  2. square:{code from (line 3–6)}
  3. square1 : undefined
  4. square2 : undefined
  5. square3 : undefined

Code Execution Phase:

  1. Value of “n” is changed from undefined to 3 in memory
  2. Nothing happens from line 2 to 7 as these are function declarations and are not called yet.
  3. At line 12, function square is invoked. Whenever a function is invoked a whole new execution context is created for that function in similar manner. Firstly memory allocation happens and “ans” , “num” are undefined. After that line by line execution of function square starts. Value of “num” is fetched from parent execution context and assigned 3. “ans” is assigned 9 after computing “num*num”. After encountering return statement variable “square2” is assigned 9 in memory of parent execution context and current execution context gets deleted.
  4. At line 13 similar pattern as line 12 gets repeated. Firstly a new execution context is created. Memory allocation of “num” and “ans” happens. Line by Line execution starts , “num” is assigned 3 then ans is assigned 9 . After encountering return statement this execution context is deleted and “square3” is assigned value 9 in memory.

Management of Execution Contexts

A Call Stack is made to maintain these Execution Contexts generated of every function invocation. Firstly, a Global Execution Context is pushed into the call stack. For every function invocation a new Execution Context is pushed into the stack . A execution context gets popped up from call stack when return statement is encountered .

Conclusion

Now you know how Javascript works behind the scenes. You learned about how the Javascript Engine runs about, how the Execution context is created its phases and details about its phases. If you have any queries or any mistakes that you think I have made would be more than happy if you could give suggestions to further improve it.

I would like to thank Akshay Saini and his Namaste Javascript series for teaching me javascript core concepts in depth.

CS Junior @ IIIT Gwalior

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store