JS Under The Hood: Execution Context

As I wen’t through my fellowship at Flatiron School, we covered Javascript in 3 weeks. 3 weeks from the fundamentals to the advanced concepts. Immediately after that we were already learning to use JavaScript libraries like React. This extremely fast pace didn’t leave us much time to sit on concepts and really learn the in’s and outs of JS. Since graduating I have been taking the time to learn the inner workings of JS, what’s going on under the hood. While I may know how to use JS and operate a complex JS library to build applications, I needed a better foundation of the basics and an understanding of what is going on behind the magic of Javascript. As I go through these concepts I will be sharing them in a series, “JS Under The Hood”. Today, I am going to be talking about what is happening when the JS engine is actually running the code you have written, more specifically Execution Context.

Execution Context (Creation)

When your Javascript file is run in the browser the JS engine creates something called the Global Execution Context. I say global because this is before any of your code is being executed so we haven’t even gotten the chance to hit any functions yet. The execution context is basically the environment in which the JS code is being executed. When the Global Execution Context is created, 3 things are created inside of it: a global object(the window), the keyword ‘this’, and a reference to the outer environment, or the scope if you are familiar(later blog). It also sets aside memory for functions and variables within the context.

Reminder: this is still before your code is being executed. At this point in time, the memory set up for your variables and functions doesn’t have access to those values until the code is executed. All variables at the creation of the global execution context are set to undefined.

Execution Context Stack

Now we get to the second phase where your code is actually ran. This is where the JS engine gains access to all the variables within the variable environment, and starts something called the stack. Every time the JS engine reaches a function call or invocation a new function execution context is created where ‘this’, the variables and functions, and objects are all related to that function context. With every function call the stack grows larger with the current function being executed at the top of the stack. Here we can see an example:

Here you visually see the stack as the Global Execution Context is created and executed, and each function call that follows is added to the stack(function a, function b). The keyword ‘this’ will have a different context depending on which function is at the top of the stack. If you would like to read further on this click here.

In the next blog I will cover another under the hood concept for you guys!

P.S ( I am taking a Udemy course so I will choose whatever topic I am currently learning about next week!)