Demystifying JavaScript Hoisting: A Beginner's Guide

You know Javascript, right? But do you familiar with javascript Hoisting ?? Let's play a game. For this you have to be honest, because I'd not be there to check you😜.

What will be the output ??

var player1 = "Cristiano";var player2 = "Lionel";function choosePlayer() {  if (!player2) {    var player2 = player1;  }  return player2;}console.log(`I love ${choosePlayer()}`);

The output is I love Cristiano. If you come up with the same output, Congratulation 🎉.

Is there anyone who get messed up with this? Don't worry , I will remove all you confusions with severel examples.

Example1:

Hoisting with var variable

console.log(x); // Output: undefinedvar x = 10;

Explaining in simple way to understand it, But I don't know, how JS works exactly behind the scene.var variable works in functional scope (If you are not familier with Scope Click here). So, wherever we declare a variable with var it treat like, we defined it in the top of that functional scope. But variable get the value from that exact line where it's declared.

In this example, we are trying to log the value of the variable x before it is declared. The JavaScript engine hoists the variable declaration to the top of the scope. However, the variable initialization is not hoisted, which means the value of x is undefined when we log it. Or simply we say, the above example exactly behave like below example.

var x;console.log(x); // Output: undefinedx = 10;

In the above example can understand difference between "assign" and "define". In the above exapmle, the 1st line I "defined" the variable and 3rd line I "assigned" the value of it.

In the 1st exmaple, when I declare the player2 variable inside choosePlayer function, it goes up of the local scope(if statement). And the declaration has completed in 1st line of the choosePlayer so, choosePlayer returned the value Cristiano.

Example2 :

Hoisting with let and const

Hoisting works differently with let and const compared to var. let and const are block-scoped, which means they are only accessible within their block scope.

In this example , I updated var variable by let and if condition.

let player1 = "Cristiano";let player2 = "Lionel";function choosePlayer() {  if (player2) {    let player2;    player2 = player1;    console.log(player2); // Cristiano  }  return player2;}console.log(`I love ${choosePlayer()}`); // I love Lionel

You can see the outputs are different.let and const is working in local scope so the changed value of player2 is not reflecting out of the if statement. Although, inside that scope we can see the value of player2 has been changed.

console.log(x); // ReferenceError: x is not definedlet x = 10; // Or , `const`

In this example, let variable difined and assigned in the same line (Or, you can think, It's similar to the below example) unlike var variable. While compile goes to the log line there is no x is defiend. That's why it's showing ReferenceError.

console.log(x); // ReferenceError: x is not definedlet x;x = 10;

In the below example, we are trying to log the value of the variable x before assigned any value. It's defined but the value of it assigned after the log, that's why it's showing undifined.

let x;console.log(x); // Output: undefinedx = 10;

To avoid ReferenceErrors with let and const, it's best practice to declare them at the beginning of their block scope.

Conclusion

Hoisting is an essential concept in JavaScript that helps developers understand how variables and functions are processed during runtime. It's important to note that only the declarations are hoisted, not the initializations. Furthermore, hoisting works differently with var, let, and const, which are block-scoped variables. Understanding how hoisting works can help developers write more efficient and reliable code, and avoid common mistakes.

Hope I able to make you understand. Thank you. 😊