How code works in JavaScript (understanding execution contexts)

So we have all been there wrapping our heads around some javascript (quirkiest language of the world) specific topics. I am gonna take a chance and explain one of those topics to make it easier for you.

Let's get started with Execution contexts!

First we need to know that what is a javascript engine? In layman terms, It is an engine which every browser has and it runs our javascript code in the browser. Javascript engine starts with creating the global execution context.

Execution context is basically an environment in which our code runs. So basically there are two types of execution contexts:

global execution context
function execution context

Each execution context has two phases namely memory creation phase & execution phase.

Memory creation phase:

Let's take a look at the following code snippet

var name='Aditya';
var age='17';

function printNameAge(){
  console.log('name :'+ name);
  console.log('age: '+ age)
}

Now I will explain what happens here during the memory creation phase :

engine stores the the variables in the memory and assign them the value undefined.
function declaration of function printNameAge is also stored in the memory(function with its full definition is stored in the memory).

Note :- Sometimes people try to access var variables and get undefined as an answer because of hoisting. It just means that at the time of accessing the variable , the variable is stored in the memory with value undefined. During the execution phase variables are assigned to their desired value and only after that you can access these variables with correct values.

Scenario with let and const: In case of let and const, if we try to use let and const variables before their initialization, the Js engine just throws a reference error. This happens because Js engine makes sure that it does not give access to these variables before their initialization.

Execution phase:

Let's take a look at the following code snippet

var name='Aditya';
var age='17';

function printNameAge(){
  console.log('name :'+ name);
  console.log('age: '+ age)
}
printNameAge();

Things happening during this phase:

name is assigned with the value 'Aditya'.
age is assigned with the value '17'.
When printNameAge is called , function execution context of printNameAge is created and is stacked over the global execution context.
javaScript engine enters the function execution context and executes the code line by line.
printNameAge execution context is popped off from the execution stack

That is why javaScript is a single-threaded, synchronous language. It handles one task at a time and everything pauses until the task is completed.

This is how code works in javascript, each time a function is called , an execution context is created and stacked over the parent(currently running) execution context.

Let's consider an example:

var name='Aditya';
var age='17';

function printNameAge(){
  var gender='male';
  function printWithGender(){
      console.log('name: '+ name);
      console.log('age: '+ age);
      console.log('gender: '+ gender);
    }

  printWithGender();
}
printNameAge();

In this example, this is how call stack works:

global execution context is created
During the execution phase of global execution context, printNameAge execution context is created and is stacked over global execution context.
Now during the execution phase of printNameAge, when printWithGender is invoked, a new execution context is created and stacked over printNameAge execution context.
After the work is done, first printWithGender context is popped off then printNameAge is popped off.

Execution context and 'this' variable:

Each execution context has a this variable.
for functions declared globally, this points to the global object which is the window object in case of browsers.
this variable gets assigned at the time of execution.
when a function is called as a method to an object, this refers to the object.

To have more control over the 'this' variable , You can use call() , apply() , bind() in your code.

This is it from my side! Hopefully you now have a brief understanding of execution contexts and how these work.

Thank you!