JavaScript Hoisting Explained to Improve Your Coding Skills

JavaScript is a language that often behaves in ways that can confuse newcomers. One such behaviour is hoisting, a concept that every JavaScript developer should understand to write more predictable code. In this article, we’ll explore what hoisting is, how it works with variables and functions, and how you can avoid the pitfalls associated with it.

What is Hoisting?

Hoisting refers to JavaScript's default behaviour of moving declarations (but not initializations) to the top of their scope. This happens during the compilation phase before the code is executed. This means that you can use variables and functions before they are actually declared in your code.

Example:

console.log(myVar); // undefined
var myVar = 5;

In this example, you might expect a ReferenceError because myVar is used before it’s declared. However, due to hoisting, what actually happens is that the declaration var myVar is moved to the top of its scope, while the assignment (myVar = 5) remains in place. Internally, JavaScript interprets it as:

var myVar;
console.log(myVar); // undefined
myVar = 5;

Because of this, myVar is defined but not yet assigned when the console.log runs, which is why it outputs undefined.

Hoisting and Variables

Let’s break down how hoisting works with different types of variables: var, let, and const.

1. var Hoisting

With var, both the declaration and the variable are hoisted. However, only the declaration is moved, not the assignment.

console.log(a); // undefined
var a = 10;

The declaration var a is hoisted, but the assignment happens later, so a is undefined when logged.

2. let and const Hoisting

Variables declared with let and const are also hoisted, but they are not initialized to undefined like var. Instead, they enter the Temporal Dead Zone (TDZ) from the start of their scope until the declaration is encountered.

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;

Here, b is hoisted, but it’s not available until the actual line of declaration is executed, leading to a ReferenceError.

The same behaviour applies to const, with the additional rule that const variables must be initialized at the time of declaration.

Hoisting and Functions

Function declarations are fully hoisted, meaning both the function name and body are moved to the top of the scope. This allows you to call functions before they are declared.

Function Declaration Example:

greet(); // "Hello, World!"

function greet() {
  console.log("Hello, World!");
}

Here, the function declaration greet is fully hoisted, so the function can be called even before the code reaches its definition.

Function Expressions and Hoisting

Function expressions, however, are not hoisted the same way. Since they are treated as assignments, only the variable declaration is hoisted—not the function definition.

greet(); // TypeError: greet is not a function

var greet = function() {
  console.log("Hello, World!");
};

In this case, the variable greet is hoisted, but it is assigned undefined during the hoisting process. That’s why calling greet() before the assignment throws a TypeError.

Avoiding Hoisting Pitfalls

To avoid confusion caused by hoisting, follow these best practices:

1. Declare variables at the top of their scope – Although hoisting moves declarations to the top, it’s a good practice to declare them at the beginning of their respective scopes. This makes your code more readable and predictable.

2. Use let and const instead of var – Variables declared with let and const are block-scoped, which makes hoisting behaviour clearer and less prone to bugs. It also reduces the likelihood of accidentally referencing variables before their initialization.

3. Organize function declarations – Declare your functions before using them to avoid relying on hoisting behaviour.

Conclusion

Hoisting is one of the many quirks of JavaScript, but understanding how it works can help you write cleaner and less error-prone code. Remember that while both function declarations and variables are hoisted, they behave differently. Stick to let and const over var, and keep your code well-organized to avoid surprises.

By being mindful of hoisting, you can make your JavaScript code more predictable and easier to maintain.