The ultimate JavaScript guide to execution contexts, variable promotions, scopes, and closures

The Ultimate Guide to Execution Contexts, collieries, Scopes, and Closures in JavaScript

The Ultimate Guide to Execution Contexts, collieries, Scopes, and Closures in JavaScript

Perhaps surprisingly, I think the most important basic concept for understanding the JavaScript language is understanding the Execution Context. Learning execution context properly makes it easier to learn more advanced things like variable promotion, Scope chains, and closures. So what exactly is an “execution context”? To understand it better, let’s first look at how we write software.

One strategy for writing software is to break up the code into separate pieces. Although these “chunks” have different names (functions, modules, packages, and so on), they serve the same purpose — to break down and deal with the complexity of the application. Now let’s not think in terms of writing code, but in terms of JavaScript engines, which interpret code. So can we handle the complexity of interpreting code by using the same strategy we used when we wrote code, by breaking it up into chunks? The answer is yes, and these “blocks” are called execution contexts. As you can use the function, module, package (functions provides/modules/packages) to deal with the complexity of the code, JavaScript engine can be handled by the execution context explain the complexity and running the code. Now that we know what execution contexts are for, the next question to answer is: how are they created and what are they made of?

The first Execution Context created when the JavaScript engine executes code is called the Global Execution Context. Initially the execution context contains two things — a global object and the this variable. This refers to the global object, which is window when JavaScript is executed in the browser and global when executed in the Node environment.

As you can see in the figure above, even without any code, the global execution context still contains two things — window and this. This is the most basic form of a global execution context.

Let’s take a step by step look at what happens when you add code to your program. Let’s add some variables first.

Can you see the difference between the two pictures above? The key is that each Execution context has two separate phases — Creation and Execution — with each phase having its own unique responsibilities.

During the global creation phase, the JavaScript engine will:

1. Creating a global object
2. createthisobject
3. Set up memory space for variables and functions
4. The variable is declared and assigned by default toundefined, while placing all function declarations in memory.

It is not until the execution phase that the JavaScript engine starts executing the code line by line.

We can see the flow from the creation phase to the execution phase in the GIF below.

During the creation phase, window and this are created, variable declarations (name and handle) are assigned to undefined by default, and all function declarations (getUser) are put into memory. Then, once in the execution phase, the JavaScript engine starts executing the code line by line and assigns real values to variables that already exist in memory.

Gifs are cool, but executing code step by step and seeing the execution for yourself is even cooler. I created JavaScript Visualizer for you, you deserve it. If you want to see the exact code above, open this link.

To really consolidate the knowledge of the creation and execution phases, let’s print out some post-creation and pre-execution values.

console.log('name: ', name)
console.log('handle: ', handle)
console.log('getUser :', getUser)

var name = 'Tyler'
var handle = '@tylermcginnis'

function getUser () {
  return {
    name: name,
    handle: handle
  }
}
Copy the code

In the above code, what do you want to print in the console? When JavaScript starts executing the code line by line and calling console.log, the creation phase is complete. This means, as you saw earlier, that the variable declaration is already assigned to undefined, while the function declaration is completely in memory. So, as expected, name and handle are undefined, and getUser refers to an in-memory function.

console.log('name: ', name) // name: undefined console.log('handle: ', handle) // handle: undefined console.log('getUser :', getUser) // getUser: ƒ getUser () {} var name = '@tylermcginnis' var handle = '@tylermcginnis' function getUser () {return {name: name, handle: handle } }Copy the code

The process of assigning the default value of undefined to variable declarations during creation is called variable promotion (as of 1997)

You may have tried to explain “variable promotion” to yourself before, but it didn’t work. The confusing thing about “variable lifting” is that nothing really “lifts” or moves. Now that you understand that execution context and variable declarations are assigned to undefined by default during the creation phase, you also understand “variable promotion” because it is “variable promotion”.

By now, you should be fairly familiar with the global execution context and its two phases, creation and execution. The good news is that there is only one other execution context you need to learn, and it is almost identical to the global execution context. This is the function execution context, which is created when the function is called.

Crucially, the execution context is only created when the JavaScript engine first starts interpreting the code (the global execution context) or when a function call is made.

Now the main question is, what is the difference between a global execution context and a function execution context? If you remember, it was mentioned earlier that during the global creation phase, the JavaScript engine will:

1. Creating a global object
2. createthisobject
3. Set up memory space for variables and functions
4. Variable declaration defaults toundefined, while the function declaration is stored in memory

Which of these steps are incorrect for the function execution context? Step 1. We have one and only global object, which is created during the creation phase of the global execution context, not when the function call and JavaScript engine create the function execution context. A function execution context does not need to create global variables and instead needs to consider arguments, whereas a global execution context does not. With this in mind, we can adjust the previous list. When the function performs context creation, the JavaScript engine will:

1. Creating a global object
2. Create a parameter object
3. createthisobject
4. Set up memory space for variables and functions
5. Variable declaration defaults toundefined, while the function declaration is stored in memory

Let’s go back to the code mentioned earlier and look at the process, but this time in addition to defining getUser, let’s look at what happens when you call it.

View visual code

function foo () {
  var bar = 'Declared in foo'
}

foo()

console.log(bar)
Copy the code

function first () {
  var name = 'Jordyn'

  console.log(name)
}

function second () {
  var name = 'Jake'

  console.log(name)
}

console.log(name)
var name = 'Tyler'
first()
second()
console.log(name)
Copy the code

var name = 'Tyler'

function logName () {
  console.log(name)
}

logName()
Copy the code