What is the Execution Context?

The execution context is the wrapper around your currently running code.

We already know there can be multple lexical environments. The current lexical environment which is running is determined by the execution context.

There are two types of execution contexts:

  • Global execution context
  • Function execution context

Phases of the Execution Context

It is important to note there are two phases of any execution context

  • creation phase
  • execution phase

Global execution context

This is the base execution context, and is created before any code is executed.

It is created by the JavaScript engine.

Creation stage of global execution context

We get some cool things happening at the creation stage of the global execution object, we will cover each of these in turn:

  • Global object
  • this
  • hoisting
  • all variables are given a value called undefined

The global object:

You can access the global object by using the this keyword.

In the browser

Within a web browser, the global object is the window object

Each new tab opened in the browser creates its own global execution context.

If we type in this in the browser console, we will be shown the global object:

this

We see the global object is the window object, with different key:value pairs. Each of these keys and values are available globally, which means they are accessible from within any function we create.

this object in window

Definition of Global

Global in JavaScript, means something which is not inside a function.

When you create a variable in JavaScript and it's not inside a function, it becomes a global variable.

index.js
1
varname="Marilyn";
2
functionnamedGreeting(){
3
4
}
5

If we run this from a web browser, we see that our two variables name and namedGreeting have been attached to the global object (the window object).

this object in window

We can type 'name' or 'this.name' to access that global variable

return name from window console

Hoisting

Hoisting is a feature provided by the global execution context at the creation stage.

Normally when code runs, it runs from top to bottom, left to right.

Taking a look at this code, what would we expect to see when it is run?

index.js
1
varname="Marilyn";
2
functionnamedGreeting(){
3
console.log('namedGreetingcalled')
4
}
5
6
console.log(name)
7
namedGreeting();
8

As expected, we see name logged first, then our function log

hoisted variables

What happens if we switch these around so we invoke our function and log our variable before they are declared?

index.js
1
console.log(name)
2
namedGreeting();
3
4
varname="Marilyn";
5
functionnamedGreeting(){
6
console.log('namedGreetingcalled')
7
}
8

Interestingly, this doesn't throw an error:

hoisted variables

Hoisting is the process whereby variable declarations are hoisted to the top of the file, meaning it can be accessed at any point in the code.

namedGreeting() is being called before it is declared. This works because the namedGreeting() function has been hoisted to the top, and so is available from the first line of the script.

Important: only function declarations are hoisted, not function expressions. Our example above works because it is a function declaration. The code below does not work because it is a function expression:

index.js
1
console.log(name)
2
namedGreeting();
3
4
varname="Marilyn";
5
constnamedGreeting=()=>{
6
console.log('namedGreetingcalled')
7
}
8

We receive a reference error:

hoisting reference error

For this reason, it's best not to rely on hoisting. You should always make sure your variables are declared before you try to access them.

Undefined

Another process during the creation stage is that all variables are allocated a value of undefined. Read more about JavaScript data types

Execution Phase

The second phase of the execution context is code execution.

This is where the JavaScript engine goes through your code line by line and executes each line.

Function execution context

There are two parts to any function:

  • Creating the function
  • Invoking the function

Function invocation

Function invocation means to call a function. This is also known as executing a funtion.

We call a function by typing out the name of the function, followed immediately by a set of paranthesis eg myFunction()

index.js
1
consthello=()=>{
2
console.log('hello');
3
}
4
5
hello();
6

We create the function on line 1

We call the function on line 5

The function execution stack

A new function execution context is created each time a function is called.

What would you expect to see logged to the console here?

index.js
1
consta=()=>{
2
console.log('a')
3
}
4
5
constb=()=>{
6
console.log('b')
7
}
8
9
constc=()=>{
10
console.log('c')
11
}
12
13
a()
14
b()
15
c()
16

answer:

execution stack logged to console

Let's switch up the order of the calls

index.js
1
consta=()=>{
2
b()
3
console.log('a')
4
}
5
6
constb=()=>{
7
console.log('b')
8
}
9
10
constc=()=>{
11
a()
12
console.log('c')
13
}
14
15
c()
16

Can you guess what will be printed to the console?

answer:

execution stack logged to console