How does hoisting in JavaScript works

In this article, I will explain how hoisting in JavaScript actually works and how are functions and variables are affected by it.

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution by the parser which reads the source code into an intermediate representation before the actual execution starts by the JavaScript interpreter. So, it doesn’t matter where variables or functions are declared, they will be moved to the top of their scope regardless of whether their scope is global or local.

This means that

console.log (hi);     
var hi = "say hi";

Actually is interpreted to this

var hi = undefined;
console.log (hi);
hi = "say hi";

So, as we saw just now, var variables are being hoisted to the top of their scope and are being initialized with the value of undefined which means that we can actually assign their value before actually declaring them in the code like so:

hi = “say hi”
console.log (hi); // say hi
var hi;

Now, what about functions?

Well, if we are talking about function declarations, we can invoke them before actually declaring them like so:

sayHi(); // Hi

function sayHi() {
  console.log('Hi');
};

Function expressions, on the other hand, are not hoisted, so we’ll get the following error:

sayHi(); //Output: "TypeError: sayHi is not a function

var sayHi = function() {
  console.log('Hi');
};

ES6 introduced JavaScript developers the let and const keywords. While let and const are block-scoped and not function scoped as var it shouldn’t make a difference while discussing their hoisting behavior. We’ll start from the end, JavaScript hoists let and const (:

Let’s first explore the let keyword behavior.

console.log(hi); // Output: Cannot access 'hi' before initialization 
let hi = 'Hi';

As we can see above, let doesn’t allow us to use undeclared variables, hence the interpreter explicitly output a Reference an error indicating that the hi variable cannot be accessed before initialization.

The same error will occur if we change the above let to const

console.log(hi); // Output: Cannot access 'hi' before initialization
const hi = 'Hi';

So, to sum up, the JavaScript parser searches for variable declarations and functions and hoists them to the top of their scope before code execution and assign values to them in the memory so in case the interpreter will encounter them while executing the code he will recognize them and will be able to execute the code with their assigned values.
Variables declared with let or const remain uninitialized at the beginning of execution while that variable declared with var are being initialized with a value of undefined.

We can better understand it via the illustration below:

I hoped you enjoy this article and it made some sense in how hoisting works and acts behind the scenes. If you liked it, you are more than welcome to make some applauses below (:

You can also follow me to get more articles like this (: