“Hoisting” a Amazing Jargon in JavaScript.

This article is recommend for beginner level guys , who gets confused with jargon Hoisting. So as you all know that JavaScript’s functions is one of the most important or core part which has many different ways of it’s representation’s. Here below I will be discussing about, how hoisting came in to the picture and how to identify it. And even interview perspective its is important.

1. Simple Functions declarations/ Function Statement

So as all of we know this is a simple ways of function declaration :

So this also called a function statement;

Function statement or Function declaration

2. Function Expression

So what is function expressions?. As we seen above code(Simple function declaration and function call) it was a simple function statement or declaration. But now we will see how function expressions are created .

Function expressions

Now note that in the above image , we have declare a variable and assigned a anonymous function (function which don’t have name). But as you have notice that the method of calling the function is same as function statement.

So now the question arise , how they differ from each other?

For this we need to know about a jargon word which came into JavaScript picture is Hoisting.

So what is Hoisting?

Hoisting is nothing but the JavaScript interpreter which scans the functions and variables declaration code from top to bottom line by line .

So how it is relate-able to function expression and function statement?

From the below example(s) you will get to understand how hoisting works.

Function statement call 1

a. In this we called the billPaid(bill) function at line no 8.

Function statement call 2

b.In this we called the billPaid(bill) function at line no 4.

So now if you have noticed from the above images(i.e Function statement call 1, Function statement call 2), whether we call billPaid(bill) function(i.e function statement) at line no.8 or line no. 4 the function will always tend to execute. This means that the Functions declarations are scanned and made available by JavaScript interpreter .

Function Expression call 1

c.In this we called the billToBePaid(billAmt) function at line no 27.

Function Expression call 2

d.In this we called the billToBePaid(billAmt) function at line no 23.

So form the above two images of function expression , you might be able to see the difference between that when we have call the function after the billToBePaid(billAmt) function expression (at line no. 27) it get’s executed but when we try to call the function before the billToBePaid(billAmt) function expression (at line no. 23) , we get the error that billToBePaid(billAmt) is not defined. This means that Function expression declarations are scanned and made undefined by JavaScript Interpreter .

So function expressions are similar to variable declaration if it is not defined on the first line it will give undefined, like the below images.

Variable declared above console

Variable declaration below console.

So from the above contexts you had able to know about hoisting. So remember hoisting comes in two pictures.

Functions Statement are scanned and made available by JavaScript interpreter.

Function expression declarations are scanned and made undefined by JavaScript Interpreter.

Conclusion

In this article i hope you get to know how Hoisting came into the JavaScript picture. Especially for beginners who get’s confused Hoisting i tried to explain the concept in a simple way. There are too many Jargon's in JavaScript like(Closure, IIFE, arrow function, call back, promise etc….) and will also try to explain about that in my future articles . I also ensure that when you try to read about this Amazing jargon's of JavaScript you will love this programming language.