Understand Hoisting in JavaScript once and for all
Tags: javascript, webdev, tutorial, codenewbie
Published: 2021-07-08 11:10:29

#What is Hoisting?
Hoisting is a JavaScript behavior in which a function or variable can be used before declaring it. JavaScript moves the function and variable declarations to the top of their scope just before executing it, Due to which we can access them even before its declarations.
Let's understand it by going through some examples.

##Variable Declarations:

### When using `var` keyword :
Below is an example where we have declared a `counter` variable and set its value to 1. However we are trying to `console.log` it before its declaration.
``` javascript
console.log(counter); // undefined
var counter = 1;
``` 
On executing we get the counter value as `undefined`. This is because JavaScript only hoists `declarations`. 
JavaScript hoists the declaration of counter and initializes its value as `undefined`. Therefore, the code looks something like this in the execution phase.
```javascript
var counter;
console.log(counter); // undefined
counter = 1;
``` 
###When using `let` or `const` keyword :
When using `let` or `const` keywords, JavaScript hoists the declarations to the top but it will not be `initialized`.
```javascript
console.log(counter);
let counter = 1;
```
Therefore when we try to console.log `counter` before initializing it, we will get ReferenceError
```
ReferenceError: Cannot access 'counter' before initialization
```
The same thing happens with the `const` keyword.

## Function Declarations:
Like Variables, JavaScript also hoists function declarations. It means that it moves the function declarations to the top of the script. 
```javascript
let x = 5, y = 10;

let result = add(x,y);
console.log(result); // 15

function add(a, b){
   return a + b;
}

```
Now the above example won't result in error even though we are calling the `add()` function before defining it.
The code looks something like this during execution:
```javascript
function add(a, b){
   return a + b;
}

let x = 5, y = 10;

let result = add(x,y);
console.log(result); // 15
```
###When using an Arrow Function or Anonymous Function:

In the below example we change `add` from a regular function to an anonymous function.
```javascript
let x = 5, y = 10;

let result = add(x,y);
console.log(result); // 15

var add = function(x,y) {
   return a + b;
}
``` 
Now, when JavaScript hoists the declaration of `add` variable it initializes it as `undefined`. Therefore, we get an error like this
```
TypeError: add is not a function
```
Now, You might be wondering what will happen if we use `let` instead of `var`.
```javascript
let x = 5, y = 10;

let result = add(x,y);
console.log(result); // 15

let add = function(x,y) {
   return a + b;
}
``` 
We will get an error again but this time the error message will be different as JavaScript will hoist the declaration of `add` but it will not be initialized.

```
Uncaught ReferenceError: greet is not defined
```
The same thing will happen if we use an Arrow Function because Arrow functions are nothing but syntactic sugar for defining function expressions.

###Some Tips to avoid Hoisting:
* Declaring your variables at the top is always a good rule.
* You can also use Strict Mode.
* In the case of variables, it is better to use `let` than `var`.

Hoisting in JavaScript is an important concept to understand as it might lead to bugs and unexpected behavior in your code.
That's it, I hope you learnt a lot from this blog. If you enjoyed this post, I’d be very grateful if you’d share it. Comment below if you have any doubts or questions.

Thank you for Reading!🙂