Rafsan's Blog
Understanding Hoisting in JavaScript: How Variables and Functions are Hoisted

Understanding Hoisting in JavaScript: How Variables and Functions are Hoisted

Syed Rafsan Raiyan's photo
Syed Rafsan Raiyan
·

5 min read

With the help of the hoisting technique, variables and function declarations in JavaScript can be used before they are even declared. The word "hoisting" refers to the idea that during compilation, these declarations are raised to the top of their respective scopes. We will examine hoisting in JavaScript and how it affects variable and function declarations in this article.

Hoisting and Variable Declarations 🎗️

The var keyword in JavaScript raises variable declarations but not their values to the top of their scope. A variable can be defined anywhere inside its scope, but it will always be regarded as having been declared at the top of that scope, according to this rule.

For example, consider the following code snippet:

console.log(myVar); // Output: undefined
var myVar = 10;

In this code, we are trying to log the value of myVar to the console before it is declared. Despite this, the code still runs without throwing any errors, and the output is undefined.

This is because, during the compilation phase, the variable declaration using var is hoisted to the top of its scope. So, the code snippet is actually interpreted as follows:

var myVar;
console.log(myVar); // Output: undefined
myVar = 10;

As we can see, the variable myVar is declared at the top of its scope, but its value is assigned later.

However, it is important to note that hoisting only works for variable declarations, not variable assignments. For example, consider the following code snippet:

console.log(myVar); // Output: Uncaught ReferenceError: myVar is not defined
myVar = 10;

In this code, we are trying to log the value of myVar to the console before it is declared. However, this time the code throws an error because we are trying to access a variable that has not been declared yet. This is because hoisting only works for variable declarations, not variable assignments.

Hoisting and Function Declarations🎗️

Like variable declarations, function declarations are also hoisted to the top of their respective scopes during the compilation phase. This means that the code will still execute without producing any issues if a function is invoked before it is declared.

For example:

foo(); // Output: "Hello, World!"
function foo() {
  console.log("Hello, World!");
}

In this code, we are calling the function foo() before it is declared. Despite this, the code still runs without throwing any errors, and the output is "Hello, World!".

This is because, during the compilation phase, the function declaration is hoisted to the top of its scope. So, the code snippet is actually interpreted as follows:

function foo() {
  console.log("Hello, World!");
}
foo(); // Output: "Hello, World!"

As we can see, the function foo() is declared at the top of its scope, and it can be called anywhere within its scope.

Hoisting and Function Expressions 🎗️

While function declarations are hoisted to the top of their respective scopes, function expressions are not. Function expressions are created when a function is assigned to a variable, like so:

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

In this code, the function is assigned to the variable foo. Since this is a function expression, it is not hoisted to the top of its scope. This means that if we try to call the function before it is assigned to the variable, we will get an error. For example:

foo(); // Output: Uncaught TypeError: foo is not a function
var foo = function() {
  console.log("Hello, World!");
}

However, it is important to note that the variable declaration itself is still hoisted. For example, consider the following code snippet:

var foo;
foo(); // Output: Uncaught TypeError: foo is not a function
foo = function() {
  console.log("Hello, World!");
}

In this code, the variable declaration for foo is hoisted to the top of its scope, and the function expression is assigned to the variable later.

Best Practices 🎗️

While hoisting can be useful in some cases, it can also lead to unexpected behavior if not used properly. Here are some best practices to keep in mind when working with hoisting in JavaScript:

  1. Always declare variables and functions before using them.

While hoisting allows us to use variables and functions before they are declared, it is best practice to always declare them first. This makes the code more readable and less prone to errors.

  1. Use let and const instead of var.

While var declarations are hoisted, they can also cause problems with scoping and can lead to unexpected behavior. Instead, use let and const, which have block-level scoping and are not hoisted.

  1. Avoid using function declarations inside if statements.

Although they are hoisted to the top of their scope, function declarations are not elevated inside of if statements. The function may behave unexpectedly if it is used before it has been declared. Instead, use function expressions inside if statements.

Conclusion 🎗️

JavaScript's powerful hoisting technique enables the use of variables and function declarations before they are even declared. Hoisting can be helpful in some cases, but if used incorrectly, it can also result in unexpected behavior. We can build more dependable and maintainable code by following the recommended practices and being mindful of hoisting in JavaScript.

Wrap Up 🎗️

Thank you for reading.

If you find this helpful, leave a like, share, and follow me, @srafsan to read more articles.

HoistingJavaScript