Understanding Hoisting in JavaScript

Are you confused how hoisting works in JavaScript?

It confused everyone in the starting. So, don't worry about it. I will help you understand how hoisting works in JavaScript through this article.

So, let’s start with this :

What is hoisting in JavaScript?

In simple and easy words hoisting in JavaScript means Hoisting is the JavaScript interpreter’s action of moving all variable and function declarations to the top of the current scope.

And it’s JavaScript default behaviour of moving all of the variable and function declarations to the top of the current scope.

Now, this makes you some understanding about how hoisting works in JavaScript.

Declaration Comes Before the Assignment

See the following snippet of code to understand how hoisting works :

Maybe you will be expected that console.log will prints undefined since the declaration of the var statement comes after the car = “BMW”. We assigned a value to the variable before it was created in the code.

When the code is executed, then it goes through a compiler. During this phase, scope gets defined and the variable and function declarations are moved to the top of their scope. If they are defined inside a function, they are moved to the top of this function, and if they are outside a function, to the top of the global scope.

Function Declarations Are Hoisted, but Function Expressions Are Not in JavaScript

You already seen the example of variable hoisting now let”s move on to the next step function declaration

See the following piece of code below :

The first thing you will keep in mind that hoisting is per-scope and that here the scope of the model variable is the local scope inside of the function carDetails. The variable declaration will then be hoisted to the top of the function, not of the global scope of the program.

We also declared the carDetails() in the global scope, and hoisting works the same for variable and function declarations: our function declaration will be moved to the top, before the execution of the function.

See the code and it will be interpreted by JavaScript as follows:

In this example, the carDetails function call works because the function declaration is hoisted, and interpreted as being declared before it was called.

Let’s take another example with function expressions, see the piece of code below :

What happened here? The function I assigned to the variable carDetails, a process that is called function expression, is not hoisted this time: when I call the function, JavaScript throws a TypeError.

If I know what is hoisting then I will be writing the above code like this below :

Now, we already know functions and variables declarations are hoisted, but the main thing you should know that is functions are hoisted first, and then variables.

Consider this code where a variable and a function are declared with the same name:

Conclusion

Hoisting is JavaScript's default behavior of moving declarations to the top.

Declare all of your variables at the top of their scope (at the top of the global scope or at the top of the function scope)

Make sure you put all your functions, if you can, also at the top of their scope.

Want to learn more about JavaScript and React js? Check out my other articles:

1. Login with GitHub and Microsoft in reactjs

2. Login with Facebook and Google in reactjs

3. How to setup redux and react router v4 in your react app

4. Setting up a React.js project with simple steps

I hope you enjoyed this Understanding Hoisting in JavaScript.

Feel free to comment and like this article so that others can find it easily on Medium!

And thank you for reading this article if you like it then share it, with your friends and enemies. And I will be writing more about JavaScript,react.js stay connected with me.