Hoisting in JavaScript: JavaScript Beginner Series

Estimated reading time: 3 minutes

Hoisting is a fundamental concept in JavaScript that can be confusing for beginners. In this guide, we will explain what is hoisting in JavaScript using simple language and practical examples.

The Future is Now: How Technology and Customer Experience are Changing EverythingRead more

By the end of this tutorial, you will have a clear understanding of what is hoisting in JavaScript and why it matters.

What is Hoisting in JavaScript?

Imagine you’re preparing for a party. You might write down a list of items to bring, but you don’t actually pack them until later. However, when it’s time to leave, you remember that you need those items, so you make sure they are ready to go. In programming, hoisting works similarly: JavaScript moves your variable and function declarations to the top of their scope before executing the code.

Robots as Colleagues: How Close Are We to Letting Technology Replace Humans in the Corporate World?Read more

In simple terms, hoisting allows you to use variables and functions before they are declared in your code.

Also read: Scopes in JavaScript!

How Does Hoisting Work?

When the JavaScript engine runs your code, it goes through two phases: creation and execution.

1. Creation Phase: During this phase, the engine scans your code and “hoists” (or lifts) all variable and function declarations to the top of their respective scopes.
2. Execution Phase: After hoisting, the engine executes the code line by line.

Example of Hoisting with Variables

Let’s look at a practical example:

In this example:

• When you call console.log(myVar) before it is declared, JavaScript does not throw an error; instead, it outputs undefined. This happens because the declaration var myVar; is hoisted to the top.
• The code effectively looks like this during the creation phase:

Hoisting with Functions

Hoisting also applies to function declarations. You can call a function before it is defined in your code:

Here, the function greet is hoisted to the top, allowing it to be called before its actual declaration.

Important Notes About Hoisting

1) Only Declarations Are Hoisted: Initializations (assignments) are not hoisted.
For example:

2) Let and Const Behavior: Variables declared with let and const are also hoisted but cannot be accessed before their declaration due to a “temporal dead zone.” This means if you try to use them before they are declared, you will get a ReferenceError.

3) Avoiding Confusion: To prevent bugs related to hoisting:

• Always declare your variables at the top of their scope.
• Use let and const for block-scoped variables instead of var.
  

Why is Understanding Hoisting Important?

Understanding hoisting helps you avoid common pitfalls in JavaScript programming. It ensures that your code behaves as expected, preventing unexpected results or errors during execution. By being aware of how hoisting works, you can write cleaner and more reliable code.

Conclusion

Hoisting is a unique feature of JavaScript that allows variable and function declarations to be moved to the top of their scope. By grasping this concept early on, you’ll be better equipped to write effective JavaScript code without running into confusing errors.

For further reading on hoisting in JavaScript, check out W3Schools for more detailed examples and explanations.

Feel free to experiment with these examples! Understanding hoisting will help you become a more confident developer as you navigate through your coding journey.

Learn complete JavaScript here.