JavaScript

Hoisting in JavaScript | Explained

When the JavaScript engine executes a program, it creates a new execution context called Global Execution Context” or the “Default Context”. You may know that JavaScript is a single-threaded language, so it only permits the creation of one Global Execution Context to execute the code.

In JavaScript, there are two phases of the Global Execution Context:

  • Creation
  • Execution

In the Creation phase, the declarations related to variables and functions are shifted to the top of the scope, known as “Hoisting“. It is also considered the default behavior of JavaScript.

This post explains Hoisting in JavaScript along with the suitable examples. So, let’s start!

Variable Hoisting in JavaScript

The JavaScript engine automatically moves the variable declarations to the program’s or script’s top. This process is known as “Variable Hoisting”.

Example: Variable Hoisting in JavaScript

In the below-given example, we have declared a variable named “number” and initialized its value “4“, but before that, we are referencing the “number” variable through the “console.log()” method:

console.log(number);

var number= 4;

In this case, the “number” variable declaration is automatically moved to the script’s top. That’s the reason the execution of the provided has not encountered any error:

In terms of syntax, the code in the execution phase looks like this:

var number;

console.log(number);

number= 5;

So what happened in the background? The JavaScript engine allocated memory to the “number” variable during the Global Execution Context creation phase and then set its values as “undefined”.

let keyword Hoisting in JavaScript

In JavaScript, the variables defined with the “let” keyword are hoisted at the script’s top, but the engine does not initialize them. The code block knows about the defined variable; however, it cannot be utilized until we declare the specified variable.

Example: let keyword Hoisting in JavaScript

We will declare the same “number” variable using the “let” keyword:

number= 6;

let number= 5;

The given code will generate a “ReferenceError” that the “number” variable is not defined:

The encountered “ReferenceError” also signifies that the “number” variable is placed in the heap memory, but it is not initialized yet.

We will try to access a variable “alpha” that does not exist in the memory. In this case, the output will show another “ReferenceError” that the “alpha” variable is not defined:

console.log(alpha);

let number= 5;

Output

Now, let’s check out how the JavaScript engine handles Function Hoisting.

Function Hoisting in JavaScript

The Function declarations are also shifted to the top of the script by the JavaScript engine. Similar to variables, JavaScript offers the functionality to hoist function declarations.

Example: Function Hoisting in JavaScript

In the following example, the “add()” function is invoked before adding its definition:

let a = 45,
    b = 23;
let sum= add(a, b);
console.log(sum);

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

However, the program still outputs the value returned by the “add()” function:

When the given example is executed, the JavaScript engine allocates memory to the declaration of the “add()” function. More specifically, a JavaScript “Object” is created according to the type of “add()” function type and also adds a “Function reference” named “add,” which points towards the created object.

So technically, in the JavaScript engine, the above-given example is executed as follows:

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

let a = 45,
    b = 23;
let sum= add(a,b);
console.log(sum);

Output

Both of the given programs generated the same output. Now, we will try to hoist Function Expressions in JavaScript.

 

Function Expressions hoisting in JavaScript

In a JavaScript Function Expression, a variable is initialized with a function value. As a result, the named variable is only hoisted, not its function.

Example: Function expressions hoisting in JavaScript

We will change our regular “add()” function to a “function expression”:

var add =function add(x, y) {

return x + y;

}

This time a “TypeError” will appear on the console window informing that “add” is not a function:

We have faced the above-given “TypeError” because the JavaScript engine placed “add” as a “variable” in the memory, not as a function.

That was all critical information related to Hoisting in JavaScript. You can further explore this topic according to your preferences.

Conclusion

Hoisting in JavaScript is supported for variables and functions declarations. In the creation phase of the Global Execution Context, the declaration related to variables and functions is moved to the top of the scope. In this way, a place in the memory is allocated to both of them, permitting us to utilize variables and functions before declaration. This write-up explained Hoisting in JavaScript along with suitable examples.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.