Understanding Hoisting in JavaScript

Photo by Arnold Francisca on Unsplash

Hoisting in JavaScript is a concept that moves all variable declarations and function declarations to the top of the script in the current scope before execution.

In simple words, hoisting allows one to use variables and call functions before they’re even declared. This concept is absolutely essential to understand for a beginner. If not understood, this can cause unwanted bugs in your code!

Note: Only declarations are hoisted and not initializations.

In this article, I will be writing about how hoisting works for functions. I have already written about how hoisting affects the usage of var, let and const in my article Difference between var, let and const.

Therefore I would not be going into details for the same. Nevertheless, here’s the summary:

1. var: Only the variable declarations are hoisted to the top of their current scope and assigned a value undefined. Using them before declaration would just return undefined.
2. let and const: These too are hoisted, however unlike var they are not initialized with any value. Using them before declaration would throw a reference error.

Hoisting with functions

In JavaScript, we can call a function before even declaring or defining it and it would run without any errors! Doing the same in another programming language would lead to your code being riddled with errors! This is all because of hoisting.

Functions in JavaScript can be classified as Function Declarations and Function Expressions. Hoisting works differently for both.

Function Declarations

Function declarations are hoisted to the top of the global scope or the function that it is enclosed in.

Example:

example();
function example(){
     console.log(“Function example has been hoisted! ”)
}

Output:

Function Expressions

Function expressions in JavaScript are functions which are assigned to a variable explicitly. They have the following syntax:

var name= function[name](param1,param2,..){  //here name is optional
      //some code
};

Function expressions are not hoisted.

Consider the following example:

var addition = sum()
var n1 = 4;
var n2 = 5;
var sum = function(n1,n2){
   return n1+n2;
};

Output:

As we can see from the output above, we get an error “TypeError: sum is not a function”. In function expressions, these functions are assigned to the variable at runtime. But here ‘sum’ is a variable and thus gets hoisted and is assigned a value of undefined. Therefore during runtime, sum already has a value undefined and hence we get the error that it is not a function. If you use this with let, the error would be “ ReferenceError: sum is not defined”.

Conclusion

Hoisting could lead to undesirable effects in our code and to avoid this, it is always a best practice to declare all variables at the top of the script. For variables, it is better to use let and const instead of var.

References

Hoisting - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

More content at plainenglish.io