Hoisting in JavaScript: One last time
Tags: webdev, javascript, react, beginners
Published: 2023-06-13 16:10:00

Hello JavaScript enthusiasts! Today, we're diving into one of JavaScript's most interesting behaviours: **Hoisting**. 

This strange-sounding term might be a source of confusion, but worry not! We're here to unravel its mysteries, all while keeping things fun and engaging. So grab your diving gear, it's time for a deep dive!

---
### Hoisting - What's That?
In the magical world of JavaScript, hoisting is a peculiar behaviour where variable and function declarations are moved to the top of their containing scope during the compilation phase. But, let's make this clear: while it's helpful to picture declarations physically "moving up", what happens is JavaScript engine stores these declarations in memory during the parsing phase.

Now that we've briefly introduced hoisting, let's dive deeper into how different variable declarations are hoisted!

---
### The Tale of 'var' Hoisting
When a variable is declared using `var`, JavaScript hoists it to the top of its function or global scope. However, it's initialized with `undefined` until it encounters the assignment in the code.
![var hoisting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jtq7p96dt42yc3s1a6ur.png)
Here, `myVar` is known from the start, but it begins its life as `undefined`. Only when the assignment is reached, myVar finally becomes `5`.

Yet another example,
![var hoisting another example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxvk4afl3zsuwkf0fhue.png)
In the above code snippet. even though the value of `myVar` is initialized to `5` before console statement it still prints `undefined`. Why? let's apply the rules of variable hoisting again,
![var hoisting under the hood](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc41i8izzzrcb53ooqaa.png)
Since `myVar` is redeclared again inside `print`, it is hoisted to `print` function scope and thus the value is `undefined`

---
### 'let' and 'const' Hoisting
Unlike `var`, `let` and `const` are hoisted too, but they aren't initialized. Attempting to access them before declaration leads us to an error-ridden place, known as the Temporal Dead Zone (TDZ).
![let hoisting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n83czsz5gbhdzykk1h5j.png)
So, even though `myLet` is hoisted, and trying to access it in its TDZ throws a `ReferenceError`. Always declare `let` and `const` before use!

---
### Temporal Dead Zone (TDZ) - An Uncharted Territory
The TDZ is the period between entering scope and being declared where variables can't be accessed. It's JavaScript's way of encouraging us to declare variables before use.
![Temporal Dead Zone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1hqvpowvxqp181l6ngr.png)

---
### Function Hoisting - A Different Beast
When it comes to function declarations, JavaScript treats them with special care. Both the name and body of function declarations are hoisted, allowing us to call the function even before it's declared!
![function hoisting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ue19805l1uw2wf4pztdg.png)
That's right! We can use `sum` even before its declaration, thanks to hoisting.

---
### Arrow Functions - The Cool Kid
Arrow functions, like function expressions, follow the hoisting rules of their variable declaration. If stored in a var variable, it's hoisted but initialized with `undefined`. If in a `let` or `const`, it resides in the TDZ until declaration.

![arrow function with let](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sb5zw9qcnntnugt3ofsr.png)
![arrow function with var](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kwa7v4q01doyh24nv85g.png)
Why does `var` implementation throw `TypeError` rather than `ReferenceError`?

According to `var`'s hoisting rules with the following representation,
![hoisting under the hood](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93gitsiacqetzfmba98g.png)
Here's the value of `sum` is `undefined` during `sum(1,2)` but we're trying to invoke a function call which is a `TypeError`

---
To wrap up, understanding hoisting and its nuances allows you to read and write JavaScript more effectively. It might seem like a quirk, but it's an integral part of the JavaScript landscape. So the next time you stumble upon a tricky piece of JavaScript code, remember, hoisting might be at play!

Happy Coding!