Demystifying Hoisting in JavaScript
Tags: javascript, webdev, beginners, programming
Published: 2023-09-29 20:13:16

## Introduction

Hoisting in Javascript is a very interesting yet confusing Concept. Many developers (including me) face problems understanding this concept in the beginning!

If you are facing problems to understand Hoisting, you are in the right place!

In this blog, we'll learn what hoisting is and how it works.

## What is Hoisting?

> Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.

Let me explain this in a simple way!

In Javascript, Wherever you have declared the variable,it will move to the Top of the scope irrespective of their Global/local scopes.

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">Note: Hoisting only moves the Declarations to the Top, not the assigned values.</div>
</div>

## Javascript code execution context:

Basically, the Javascript execution context is divided into two parts:

1. Creation Phase
    
2. Execution phase
    

In the Creation Phase, Variables are allotted their memory space and initialized with the value `` `undefined`. ``

In the Execution Phase, Previously declared variables are assigned some values and they are used to do further operations.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690225029917/aee8e7b6-4f0f-4f17-907f-b24d71aecd83.png)

### Variable Hoisting:

Before jumping on Variable hosting, Try to predict the output of the following code:

```javascript
console.log(Arindam);

var Arindam = 'Welcome to my blog';
```

So What will be the output?

Will it throw an error?

No, It won't do that. I have previously mentioned that hoisting moves the declaration to the top scope. So it will move the declaration of the variable Arindam to the Top and assign `'undefined'` to it.

So the output is :

```javascript
undefined
```

Now, Let's take another example:

```javascript
console.log(Hello);
```

What will be the output of this?

Undefined?

No! Unlike the first example `Hello` is not defined here, So it will throw an error!

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690227470521/a61c1285-1211-4f80-9b3f-6088104215d3.png)

### Temporary Dead Zone(TDZ):

Variables declared with `let` and `const` are hoisted but not initialized with a default value. So, If you try to access the value of the variables it will throw `ReferenceError.`

it happens because of the temporal dead zone (TDZ).

> The TDZ starts at the beginning of the variable's enclosing scope and ends when it is declared. Accessing the variable in this TDZ throws a `ReferenceError`.

Let's see an example to understand this :

```javascript
{
 	// Start of Arindam's TDZ
  	let Twitter = 'Elon';
	console.log(Twitter); // "Elon"

	console.log(Arindam); // ReferenceError because we're in the TDZ

	let foo = 'Arindam';  // End of Arindam's TDZ
}
```

For more information about TDZ, Check this [Blog](https://www.freecodecamp.org/news/what-is-the-temporal-dead-zone/)

## Function Hoisting:

Just like Variables, Javascript functions are also hoisted. With this, we can call a function before it is defined.

Let us understand it with this example:

```javascript
greet(); // output: "Hello there!"

function greet() {
  console.log("Hello there!");
}
```

Here, We are calling the function before its declaration and the output is `"Hello there!"` . It's because the function is hoisted to the top scope.

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">Note that only function <em>declarations</em> are hoisted, not function <em>expressions</em>.</div>
</div>

If we try to call the variable that the function expression was assigned to, we will get a `TypeError` or `ReferenceError`.

Here are some errors you may encounter.

```javascript
Arindam(); // Uncaught TypeError: Arindam is not a function
var Arindam = function () { }

Red(); // Uncaught ReferenceError: Cannot access 'Red' before initialization
let Red = function () { }

baz(); // Uncaught ReferenceError: Cannot access 'baz' before initialization
const baz = function () { }
```

If you call a function that is never declared, it throws a different `ReferenceError`:

```js
Goodbye(); // Uncaught ReferenceError: Goodbye is not defined
```

---

## Conclusion:

If you found this blog post helpful, please consider sharing it with others who might benefit. You can also follow me for more content on Javascript and other web development topics.

To sponsor my work, please visit: [Arindam's Sponsor Page](https://arindam1729.hashnode.dev/sponsor) and explore the various sponsorship options.

Connect with me on [Twitter](https://twitter.com/intent/follow?screen_name=Arindam_1729), [LinkedIn](https://www.linkedin.com/in/arindam2004/), [Youtube](https://www.youtube.com/channel/@Arindam_1729) and [GitHub](https://github.com/Arindam200).

Thank you for Reading :)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1690232554430/c2d3c799-ccbe-4653-a446-9e478f06bc60.png)F