JavaScript Concepts: Hoisting

In this post, I’m continuing my JavaScript Concepts series with an overview of hoisting, another tricky yet important concept for new JS developers to understand. I will provide my summary of the definition and then we’ll dive right into some examples to see how hoisting works for both variables as well as functions. For reference, he’s the official documentation: https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

What is hoisting?

As opposed to some other programming languages, where variables or functions have to be declared before they are used, hoisting is the default behavior in JavaScript where variable and function declarations are moved, or hoisted, to the top of the scope before any code is executed. In other words, variables and functions can be used/called in your code before you actually declare them.

We’ll cover this in more depth with some examples below, but before doing this, there are two important things to note:

1. For variables, only declarations are hoisted and not initializations
2. For functions, similar to the above note on variables, only function declarations are hoisted and not function expressions

With that being said, let’s get into it!

Variables

Take a look at the following example:

num = 1;
console.log('The number is ' + num); // Output: The number is 1
var num;

This shows hoisting in its simplest form. Behind the scenes, JavaScript is moving the third line (the variable declaration) to the top of the code, therefore when the code is executed, the second line is able to log to the console correctly!

However, as I mentioned above in the previous section, take a look at this next example where a variable is declared and initialized in a single line:

console.log('Number is ' + num); // Output: Number is undefined
var num = 1;

Because only variable declarations are hoisted and not initializations/assignments, the value of num is undefined since the initializing/assigning part of that second line is not being hoisted.

Functions

Now let’s take a look at an example using functions:

console.log(Add(10, 10)); // Output: 20
function Add(x, y) {
  return x + y;
}

Similar to variable hoisting, in this example the JavaScript compiler is moving the function declaration to the top before the code is executed, so we are able to console log the Add function before we define it- again, this is because of hoisting!

And, as mentioned earlier, only function declaration gets hoisted and not function expression. So, for the example below:

console.log(Add(10, 10)); // Output: error, Add is not a function
var Add = function Sum(x, y){
  return x + y;
}

You’ll see that we get an error when we attempt to call the function before the function expression is written, since it isn’t getting hoisted.

Conclusion

While the examples in this post were fairly simple, I hope that this helped a bit when it comes to wrapping your head around the concept of hoisting in JavaScript. There’s a lot more out there that you can read to strengthen your knowledge of this subject, but personally I find that starting out small and with less complex examples is the best way to grasp and begin understanding some of the more confusing concepts of JavaScript.

I’ll leave you with a summary of the main takeaways here:

1. Hoisting is JavaScript’s default behavior of moving all variable and function declarations to the top of the scope before code execution
2. Only variable declarations are hoisted, and not variable initializations/assignments
3. Only function declarations are hoisted, and not function expressions
4. To follow best practices, you should always define functions/variables/etc. before using them in your code to avoid any errors or bugs