The global execution context is created when the JavaScript engine runs the JavaScript code. The creation and execution phases make up the global execution context.

The variable and function declarations are moved to the head of your code during creation by the JavaScript engine. In JavaScript, this function is referred to as "hoisting."

Variable hoisting

The JavaScript engine raises the variable declarations to the top of the script (variable hoisting). The counter variable, for instance, is declared in the example below, and its value is set to

console.log(counter); // undefined
var counter = 1;

In this illustration, the counter variable is mentioned before the declaration.

The first line of code, however, doesn't result in a mistake. The variable declaration is moved to the top of the script by the JavaScript engine, which is the cause.

Technically, the execution step of the code looks like this:

var counter;
console.log(counter); // undefined
counter = 1;

The JavaScript engine initialises the variable counter to undefined during the global execution context's initialization phase and stores it in memory.

let keyword

The let keyword is used to declare the variable counter as follows:

console.log(counter);
let counter = 1;

The following JavaScript error is produced:

"ReferenceError: Cannot access 'counter' before initialization

The counter variable is already present in the heap memory, according to the error message. It hasn't been initialised, though.

The let keyword-declared variables are lifted by the JavaScript engine in the background. The let variables are not initialized, though.

You'll see that JavaScript will produce a different error if you attempt to access a variable that doesn't exist:

console.log(counter1);
let counter = 1;

This is the mistake:

"ReferenceError: counter1 is not defined

Hoisting a function

The JavaScript engine hoists function definitions as well as variables. This indicates that the function declarations are also moved to the top of the script by the JavaScript engine.

For instance:

let x = 20,
  y = 10;

let result = add(x, y);
console.log(result);

function add(a, b) {
  return a + b;
}

In this instance, the add() method was called before it was defined. The following is the equivalent code to the one above:

function add(a, b){
    return a + b;
}

let x = 20,
    y = 10;

let result = add(x,y);
console.log(result);

The add() function declaration is stored in the heap memory by the JavaScript engine at the construction stage of the execution context. To be more specific, the add function reference is created by the JavaScript engine and refers to the function object. The function object is a function object of the Function type.

Expressions of functions

The add is converted from a standard function to a function expression in the example below:

let x = 20,
    y = 10;

let result = add(x,y);
console.log(result);

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

If the code is run, the following error will take place:

"TypeError: add is not a function

The add variable is created in memory by the JavaScript engine and given an initial value of undefined during the construction step of the global execution context.

The add is undefined when the following code is run, hence it isn't a function:

let result = add(x,y);

Only when the anonymous function is actually being executed in the context of the global execution is the add variable allocated to it.

Arrow functions

The expression for the add function is changed to the arrow function in the example below:

let x = 20,
    y = 10;

let result = add(x,y);
console.log(result);

var add = (x, y) => x + y;

Because arrow functions provide syntactic sugar for defining function expressions, the code likewise generates the same error as the function expression example.

"TypeError: add is not a function

The arrow functions aren't hoisted, just like the function expressions.

Summary

• The variable and function declarations are moved to the top of the script by JavaScript hoisting, which takes place during the construction phase of the execution context.
• The variables declared with the let keyword are hoisted by the JavaScript engine, but they are not initialized like the variables declared with the var keyword.
• The function expressions and arrow functions are not lifted by the JavaScript engine.