Select Page

Understanding Hoisting in JavaScript

by | Jun 27, 2023

In the world of JavaScript, there are certain peculiarities and concepts that can puzzle even experienced developers. One such concept is hoisting.

At first glance, it may seem like magic, but in reality, it’s a fundamental behavior of JavaScript. In this blog post, we will explore what hoisting is, how it works, and why it’s important to understand this concept to write better JavaScript code.

What is Hoisting?

Hoisting is a JavaScript mechanism that allows variables and function declarations to be moved to the top of their containing scope during the compilation phase, before the code is executed.

This means that regardless of where variables and functions are declared in the code, they are hoisted, or lifted, to the top of their scope.

Hoisting in Action

To illustrate how hoisting works, let’s consider the following example:

console.log(message);  // Output: undefined
var message = "Hello, hoisting!";
console.log(message);  // Output: Hello, hoisting!

In the above code snippet, the variable message is accessed before it is even declared. Surprisingly, the code doesn’t throw an error. Instead, it prints undefined.

This is because during the compilation phase, JavaScript moves the variable declaration to the top while leaving the assignment in place. Hence, when the first console.log() statement is executed, the variable exists but hasn’t been assigned a value yet.

Function Hoisting

Hoisting also applies to function declarations. Consider the following example:


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

In this case, the function sayHello() is called before it is declared. Again, JavaScript’s hoisting mechanism ensures that the function declaration is moved to the top, allowing the code to execute without errors.

Hoisting Limitations

While hoisting applies to both variables and function declarations, it’s important to note that only the declarations themselves are hoisted, not the initializations or assignments. Let’s look at an example:

console.log(number);  // Output: ReferenceError: number is not defined
let number = 42;

In this case, we’re using the let keyword to declare the variable number. Unlike var, let and const declarations are not hoisted to the top of their scope. As a result, when we try to access number before its declaration, a ReferenceError is thrown. This demonstrates the limitation of hoisting with respect to block-scoped variables.

Best Practices

Understanding hoisting is crucial for writing predictable and maintainable JavaScript code. Here are a few best practices to follow:

  1. Declare your variables and functions at the top of their respective scopes to make the code more readable and avoid unexpected behaviors caused by hoisting.
  2. Use strict mode ("use strict";) to disable implicit variable declaration and enforce cleaner code.
  3. Avoid relying on hoisting to reference variables before their declaration. It can lead to confusion and make the code harder to understand.


Hoisting is a concept that may initially perplex JavaScript developers, but once understood, it reveals the inner workings of the language.

By knowing how hoisting operates, you can write cleaner, more predictable code. Remember to declare your variables and functions at the top of their scopes, and always strive for code readability. JavaScript hoisting is a powerful tool when used correctly, but like any tool, it’s essential to understand its behavior to leverage it effectively.


Submit a Comment

Your email address will not be published. Required fields are marked *

Looking For Something?

Follow Us

Related Articles

How to Open Links in a New Tab Using HTML and JavaScript

How to Open Links in a New Tab Using HTML and JavaScript

Introduction How to Open Links in a New Tab Using HTML and JavaScript Have you ever clicked on a link and wished it would open in a new tab instead of navigating away from the current page? Well, you're in luck! In this blog post, we'll guide you through the simple...

Recursion in JavaScript: Why and How

Recursion in JavaScript: Why and How

Recursion is a powerful programming concept that often mystifies beginners, but it's an essential tool in a developer's toolkit. In JavaScript, recursion involves a function calling itself to solve a problem. This might sound a bit perplexing at first, but let's break...

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!