What is hoisting in JavaScript?

Note:

Note: I had posted this as a thread before, but I decided to put this as a blog on this platform. The thread: https://www.showwcase.com/thread/55784

I reviewed my Anki cards on interview preps and the hoisting question came up. Sometimes, I remember and other times, I don't remember. 😅 So I decided to look into hoisting more.

It is a tricky question that comes with a tricky answer. However, hoisting in JavaScript allows you to access functions and variables before they have been created according to Wes Bos's JavaScript - Hoisting.

Also, there are TWO things that are hoisted

function declarations

variable declarations

This was the question that came up in my Anki review. The question was 

Explain the difference between the 2 functions below

The first one is a function declaration, while the latter is a function expression. The key difference is that the function declaration has its body hoisted, but the bodies of function expressions are not.

Let's use different examples and say there are 2 greeting functions. Both of them will log both values in the console.

However, if you are trying to move function callings before the declaration. The function declaration will log the value in the console, while the function expression will show an error in the console. This is because JavaScript will move all function declarations to the top of the file and then run it, and NOT function expression. The "move" is done in the background somehow by JavaScript. The file stays the same and doesn't actually change.

Also, if you use Eslint, it will complain about greet() being used before the function was defined. This is based on the no-use-before-define rule. You can read more about this rule on the site here. This is why I seldom call the function before it defines and if I do, Eslint will let me know.

Let's run the code below. We know this will log the "a" value for sure.

If let or const was used instead, it shows the same error as the function expression.

Hoisting is a tricky concept to understand and can be really confused if var was used instead of let and const.

Let's think this way, books have sequels. e.g. Harry Potter books have 1 to 7 sequels. So if you are trying to read the 2nd book instead of the first book, it would not make sense, and you are skipping details and events that were written in the first book. In order to understand the story, you would need to read these books in the order. It is similar to How JavaScript reads your code from top to bottom. Variables or functions need to be declared before you can call them. And it would make sense.

Of courses, JavaScript is weird in its own way, like you can call the function declarations before the functions are defined and var was used.

Thank you for your time and for reading this