HomeAbout Me

Execution Context in JavaScript (Part 1.)

By Zoran Stankovic
Published in Programming
November 15, 2020
2 min read
Execution Context in JavaScript (Part 1.)

In this blog post I will try to give answers to these questions:

  1. What is the execution context in JavaScript?
  2. What type of execution context exists?
  3. What is Hoisting?

One of the essential concepts in JavaScript is learning about “Execution Context.” Once we understand what it is, it will be much easier for us to understand more advanced topics like Hoisting, Scope chains, and Closures.

Execution Context is a concept that describes the environment in which your code is running. Also, it allows the JavaScript engine to manage the complexity of interpreting and running your code.

Now let us see how we can create an Execution Context. When we run our JavaScript application, even if that is an empty JavaScript file, JavaScript creates the first Execution Context called “Global Execution Context.”

Global Execution Context

Initially, this Global Execution Context comprises two things:

  1. a global object and
  2. a variable called this

If we execute code in the browser outside of any function, this refers to a global object, which in this case is the window. It doesn’t matter if we are in strict mode.

If we execute this code in Node, at the top level, this is equivalent to the global object which is called global.

Global Execution Context in Browser and Node REPL

Global Execution Context in Browser and Node REPL
Global Execution Context in Browser and Node REPL

I won’t go into any details here, but in Node this is only true for the REPL. If we execute this code,

this === global // returns true

inside of Node REPL, we will get true.

Node REPL
Node REPL

But inside of the Node module, execution of the code below will return false.

console.log(this === global) // returns false

Code inside of the Node module
Code inside of the Node module
It is because inside of node module, this refers to module.exports. In this blog post, we will focus on Execution Context inside of Browser.

Execution Context has two phases: Creation and Execution phase. We can see that in the picture below.

var x = 2
var y = 3
function add(x, y) {
  return x + y
}

Representation of Global Execution Context in Creation and Execution phase
Representation of Global Execution Context in Creation and Execution phase
In Global Creation phase, JavaScript engine, as we mentioned earlier, will create a global and this objects, and also will allocate memory space for variables and functions. In this phase, the JavaScript engine will assign to the variable declarations a default value of undefined but will place whole function declarations in memory. This brings us to one term mentioned at the beginning of this blog post, and that is Hoisting. We call assigning default value of undefined to variable declarations in the Creation phase Hoisting.

Tip: It’s always better to first define your variables and then use them, don’t rely on Hoisting.

Then JavaScript engine starts to parsing and executing your code line by line. We call this process of code execution thread of execution. In this phase, the JavaScript engine also assigns the actual values to already declared variables.

Besides the Global Execution Context, there is Functional Execution Context. In the next blog post, I will tell you more about Functional Execution Context and the differences between them.

Recap

  • Execution context in JavaScript is a concept that describes the environment in which your code is currently running.
  • Execution context has two phases:
    • Creation and
    • Execution
  • There are two execution contexts in JavaScript:
    • Global and
    • Functional (or local)
  • JavaScript engine creates Global Execution Context once it runs JavaScript application.
  • JavaScript creates two objects for us inside of Global Execution Context:
    • global object and
    • a variable, this that, in the Browser, points to the same global object which is window.
  • Hoisting is assigning a default value of undefined to variable declarations in the Creation phase.

Tags

#javascript#programming
Previous Article
Best practices for better studying
Zoran Stankovic

Zoran Stankovic

Software Developer

Topics

Learning
Programming

Related Posts

Execution Context in JavaScript (Part 2.)
December 06, 2020
3 min
© 2022, All Rights Reserved.

Quick Links

About Me

Social Media