JavaScript Hoisting Explained For Absolute Beginners

Hoisting is an overlooked or misunderstood feature of JavaScript, leading to subtle bugs that are hard to trace. In this article, you will understand JavaScript hoisting, how it affects variable and function declarations, and how to mitigate this potential issue.

Photo by Boris Hamer: https://www.pexels.com/photo/industry-crane-architecture-high-15912490/

A lot of software developers get scared when they first hear about hoisting. They feel that it’s a convoluted process. But in fact, it’s a straightforward concept. According to w3scools, it’s JavaScript’s behavior of moving (variable and function) declarations on top. In other words, it’s the ability to use variables or functions before they are declared.

Variable Declarations Are Hoisted

Let’s take a look at an example of variable hoisting.

// assign and print variable "num"
num = 4;
console.log(num);

// variable declaration
var num;

Notice that we are assigning the value 4 to variable num. Then, we display it on the console. Believe it or not, this code will work, and the text shown in the console will be 4. This is variable hoisting in action. The next question is, why does this code work? Because of hoisting. Behind the scenes, JavaScript will move the variable declaration (var num;) to the top of the current scope. So, the actual JS code that is executed is this:

// Hoisting - JS moved the declaration to the top
var num;
num = 4;
console.log(num);

Variable Initializations Are Not Hoisted

It is essential to know that hoisting only works with declarations, not variable initializations. The code below will print “undefined” and will behave like “normal” code, meaning JavaScript will not interfere with it.

console.log(num);

// variable initialization - not hoisted
var num = 10;

Function Declarations Are Hoisted

Hoisting can also apply to function declarations. The code below is an illustration of this behaviour.

console.log(convertMetersToMiles(100)); // will print 0.062137

// function declaration
function convertMetersToMiles(meters) {
  return meters * 0.00062137;
}

Again, JavaScript will see the function declaration and will move it at the top of the current script or function. So, internally, the code that will get executed will look like this.

Not all functions behave like this. Function expressions and arrow functions are not hoisted. So, the example below will produce an error.

console.log(convertMetersToMiles(100)); // will not work

// function expression – not hoisted
const convertMetersToMiles = function (meters) {
  return meters * 0.00062137;
}

How To Mitigate Hoisting Issues

As I said earlier, some developers often overlook or misunderstand hoisting, which can lead to bugs that might be hard to trace. Here are three things you can do to mitigate hoisting issues:

1. Declare all variables and functions at the top of their scope before you use them

2. Use a linter to warn you if you use variables or functions before declaring them. In ESLint, for example, adding the no-use-before-define rule prevents that and helps you mitigate hoisting

3. Enable “strict” mode — JavaScript will not allow variables to be used if they are not declared