Hoisting in JS💙💯

In Today's article we're going to learn and discuss about the most confusing yet most simple concept in modern javascript known as Hoisting.

Hoisting

In Simple words hoisting is an in-built process by which we can execute some code of our program even before initialization. Hoisting works for functions and variables in our javascript which means that we can access the functions and variables even before initialization.

Normal Flow of Code

// Normal Code 

var x = 7;

function main () {
    console.log("Hoisting in Javascript by Prabadhya Upadhyay");
}

console.log(x)
main();


// Output
7;
Hoisting in javascript by Prabadhya Upadhyay

Hoisting Flow

// Hoisting Flow

main() // Accessing & Invoking the function even before initialization
console.log(x); // Accessing the variable even before initialization.

function main () {
    console.log("Hoisting in Javscript by Prabadhya Upadhyay")
}

var x = 7;

// Output
Hoisting in javascript by Prabadhya Upadhyay
undefined;

Hoisting with variables

In other languages if we try to access the variable before initialization you will surely expect an error but in javascript it is possible to access the variables even before the initialization with the help of hoisting. But we can only access the variables without any error which are defined using the var keyword. if we try to access any variable which is defined using ES 6 Variable Declarations such as 'letandconst` we will get an error something like mentioned below:-

Using let Keyword

console.log(a);
let a = 'Hello world';

// output error in console

Uncaught ReferenceError: a is not defined

Using const Keyword

console.log(b);
let b = "Hello world";

// output error in console

Uncaught ReferenceError: b is not defined

Ok It is quite good that you've seen that it won't work with these above variable declarations. Now let's see how it works with our old-aged var keyword:-

console.log(c);
var c = "hello world";

// output 

undefined // if you'll see the difference this time we haven't recieved any error but we also not got value which is initialised to our variable c ( "hello world");

So you all must be wondering why we've recieved the value as undefined it is because of the javascript execution context & memory creation phase. The var keyword is of global scope which means we can access the variables from anywhere in the code which are defined using var keyword. So in execution context memory creation phase the variables which are defined using var gets allocated a special value Undefined .

For more information about execution context & how javascript works behind the bar you can check out my another article💻💯 ;

Hoisting with Functions

Hoisting with functions in javascript works way differentely as it works with variables. We can an invoke & access the whole function even before initialization and it will get executed , but the execution of the code which is inside the function will only work when we define the function using our function declaration keyword.

Note:- It won't work with ES6 arrow Function syntax.

Let's try to understand it with the help of few examples:-

Using Normal Function Declaration

// Hoisting with functions 

getAuthor ();

function getAuthor () {
    console.log("Hoisting in Javascript by Prabadhya Upadhyay")
}

// Output

Hoisting in Javascript by Prabadhya Upadhyay

Using Arrow Function Declaration

getAuthor();

console.log(getAuthor);

var getAuthor = () => {
    console.log(" Hoisting in Javascript by Prabadhya Upadhyay")
}

// Output 1 of invoking the function

Uncaught TypeError: getAuthor is not a function

// Output 2 of logging out the function to console.

Undefined

Ok so now we've seen the difference between how normal functions and arrow functions work differently with hoisting! Now Let's know the reason behind it!

Whenever we declare an function using an arrow function syntax it behaves like an variable because store it inside an variable. so in the memory creation phase it allocates the special keyword undefined to our functions.

But in case of normal functions declarations with function keyword what happens in memory creation phase that it stores the whole function code in the memory itself instead of undefined. so whenever we want to invoke it or execute it we can invoke it easily like we've seen in the first code example.

Few Important Points About Hoisting

• It is strongly recommended to not to use the var keyword anymore. To avoid hoisting , other complex issues in your code base. Instead use ES6 let and const.

• Hoisting Doesn't work with let and const variable declarations and arrow functions.

To know more about memory creation phase & how javascript works behind the bars! I would highly recommend to check out my previous article

Well this is for today and thanks a lot for reading! Hope this helps you out!💙

Do Read , Share and Code 💻

Ping me any time in case of any doubts & clarifications ☺️