Javascript Execution Context and Hoisting

This article is for those who don’t know how JavaScript is executed.

Prerequisite: You should know

1. Scopes in javascript
2. This keyword in javascript
3. Stack in computers

Before we start can you answer below?

Is Javascript an Interpreted or a compiled language?

Yes, Javascript (JS) is an interpreted language, still has its own form of a compiler, run in what’s known as the Javascript engine.

Every web browser has its own form of a JavaScript engine Eg. Chrome has v8 and Mozilla has spider monkey etc, though they all have the same purpose. JavaScript engines simply convert JavaScript source code into a language the compiler can understand, then executes it.

Let’s start then,

Execution Context

An environment in which the javascript code runs is what form an execution context.

The execution context decides what particular piece of code has access to variables, functions, objects, etc.

If you have read the scope article then you should know what’s the global scope and local scope(function scope).

So similarly execution context have different types —

1. Global Execution Context

Whenever the code runs for the first time or when the code is not inside any function then it gets into the global execution context. There is only one global execution context throughout the execution of code.

In the case of browser global execution context does 2 things

1. Create a ‘window’ object.
2. The window object is referenced to ‘this’ keyword.

2. Function Execution Context

Whenever the code execution found a function it creates a new function execution contexts. There can be any number of function execution contexts.