JavaScript Hoisting Demystified: Elevate Your Coding Skills!

Hey there 👋 Let's talk about a JavaScript concept that might surprise you - Hoisting! 🤯

Hoisting is all about how JavaScript handles variables and function declarations during the compilation phase.Basically, it moves them to the top of their scope, even before the code is executed. Wait, What!

So, what does that mean in practice?

Well, let's say you have this code:

   `console.log(myVar);

   var myVar = "Hello, world!";

   // It outputs: `undefined`

Even though you're trying to log myVar before it's declared, the code still runs without any errors. That's because during the memory creation phase, myVar is assigned a default value of undefined. (You can refer to my last post where I wrote about how JavaScript works.)

Let's take another example:

myFun();

function myFun() { console.log("I am FuN"); }

In this case, the whole function will store in memory. If you console it ( console.log(myFun) ), you will see the whole function will print out or run, and it will output I am FuN.

Pretty cool, right? Hoisting can have some interesting implications for your code, so it's important to understand how it works. 🤓 Let me know if you have any other JavaScript concepts you'd like to chat about!

And last what about arrow functions? 🤔🤔🤔

Its also treated like variable, store whole function in it. When you will try to call like myFun() before declaration you will experience error.

Here is an example:

    `console.log("Before declaration myArrowFun: ", myArrowFun)

    var myArrowFun = () => { console.log("I am Arrow FuN"); }

    console.log("After declaration myArrowFun: ", myArrowFun)

    console.log("Call declaration myArrowFun: ", myArrowFun())`