# 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 'let` and `const` 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💻💯 **](https://prabadhya-blogs.hashnode.dev/execution-context-call-stack-in-js);

## 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](https://prabadhya-blogs.hashnode.dev/execution-context-call-stack-in-js)**

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 ☺️](https://www.linkedin.com/in/prabadhya-upadhyay-4272881a1/)**