Introduction

If you're new to JavaScript, you may have heard the term "hoisting" thrown around, but you might not know exactly what it means. In this blog post, we'll be taking a deep dive into what hoisting is and how it works in JavaScript.

How does hoisting works? 🤔

Hoisting is a concept in JavaScript that refers to the way variables and functions are stored in memory before code is executed. When the JavaScript engine first processes a script, it sets up memory for the data in the code without executing any of it. This process is known as hoisting.

Example 1: Functions

Functions are stored with a reference to the entire function, which means that we can invoke them even before the line on which they are declared.

sayHello(); // Outputs: "Hello, world!"

function sayHello() {
  console.log("Hello, world!");
}

Example 2: Variables

On the other hand, variables are treated differently. In the past, variables declared with the var keyword were stored with a default value of undefined. This means that if we reference a variable declared with var before its declaration, it will return undefined.

console.log(message); // Outputs: undefined

var message = "Hello, world!";

Updates with ES6 ⬆️

However, starting with ECMAScript 6 (ES6), we now have two new ways to declare variables: let and const.

Variables declared with let or const are stored uninitialized, which means that attempting to access them before their declaration will throw a ReferenceError.

console.log(message); // Throws a ReferenceError

let message = "Hello, world!";

Function vs Variable Declaration 🆚

It's important to note that the way functions and variables are stored during the hoisting process is different.

Functions are stored with a reference to the entire function, which means that we can invoke them before they are declared. On the other hand, variables declared with var are stored with a default value of undefined, while variables declared with let or const are stored uninitialized. This can lead to some unexpected behavior if we're not careful.

For example, consider the following code:

console.log(message); // Outputs: undefined

var message = "Hello, world!";

function sayHello() {
  console.log(message); // Outputs: "Hello, world!"
}

Pros and Cons of hoisting 👍🏻👎🏻

The ability to invoke functions before they are declared can be a powerful tool in JavaScript. It allows us to define functions that we will be using later in our code without worrying about the order in which they are declared. This can help improve the readability and organization of our code.

However, the fact that variables declared with var are stored with a default value of undefined can lead to some potential pitfalls. If we accidentally reference a variable before it is declared, it will return undefined instead of throwing an error. This can make it difficult to track down bugs and can lead to unexpected behavior in our code.

Best practice to avoid pitfalls ✅

Here are a few things to keep in mind while writing your code:

• Use the let or const keywords to declare variables whenever possible. This will help prevent accidental references to undefined variables and make it easier to catch mistakes.

• Be mindful of the order in which you declare functions and variables. If you reference a variable before it is declared, it will return undefined.

• Avoid using the var keyword to declare variables whenever possible. While it is still supported in modern browsers, let and const provide more reliable and predictable behavior.

Conclusion ✍🏻

In this blog post, we've covered what hoisting is and how it works in JavaScript. We've looked at the differences between function and variable declarations in hoisting, the benefits and potential pitfalls of hoisting, and some tips for using hoisting in your code.

Resources 📑

If you want to learn more about hoisting and other concepts in JavaScript, there are many great resources available online. Some good places to start include:

• The MDN documentation on hoisting

• JavaScript Hoisting on GeeksForGeeks

• What is Hoisting in JavaScript? - FreeCodeCamp

Thank you so much for reading! 🎉

Thank you for reading this article! I hope it was helpful in understanding the basics and using them in your web development projects.

If you enjoyed this article, be sure to subscribe to my newsletter to stay up-to-date with my content.

And if you need any help or have any questions, don't hesitate to reach out – I'm happy to help out. See you on Twitter!👋🏻