Table of contents
There’s a misconception most people have about hoisting in JavaScript, but I'm about to clear the myth. Hoisting allows you to use variables and functions before they are declared and most people think that hoisting only works with variables declared with var. In this article, you're going learn what hoisting is and how it works.
If you are learning JavaScript, by now you should know about variable declaration, initialization, and accessing a variable.
var gender; // variable declaration
var gender = 'female'; // variable initialization
console.log(gender);
//output: female
If you’re new to the game or you’re just about to start your journey in JavaScript, you can check out my article on it (Variables in Javascript). This article contains everything you need to know about variables.
Hoisting
Hoisting is the javascript default behavior of moving declarations to the top of the scope before execution. It allows you to have access to and use variables as well as functions before they are declared.
console.log(city);
var city;
//output: undefined
Take a look at the code above, you'll notice that the output is undefined. the variable city is moved to the top of the scope(hoisting), this makes it possible to access the variable before the line it was declared.
Another thing you need to know is, only variable declarations are hoisted.
console.log(score);
var score = 10
//output: undefined
In the code above, you'll notice that the output is still undefined, despite assigning a value to the variable. Only the variable declaration var score is hoisted to the top and this made it accessible, but the initialization 10 which is the value assigned is not hoisted.
There's a false assumption that only variables declared with var are hoisted. Well, in the true sense, variables declared with let and const are also hoisted and I will explain how hoisting works with let and const in javascript.
let's try to declare a variable with let and const.
console.log(city);
let city = lagos;
The code above is going to display an error message. Uncaught ReferenceError: cannot access "city" before initialization. This means that javascript knows the variable city because it is hoisted to the top of the global scope, but according to the error message, it cannot be accessed before initialization. Because of this, there's an assumption that let and const are not hoisted.
To not confuse you further, I'm going to explain the difference between hoisting with var and hoisting with let and const.
variables declared with var are hoisted with a default initialization of undefined. This is the reason why they can be accessed before declaration. Accessing them before the line they were declared returns undefined.
Variables declared with let and const are hoisted without a default initialization. This makes them inaccessible before their declaration. Accessing them before the line they were declared throws an error message. Uncaught ReferenceError: cannot access "variable" before initialization.
conclusion
Hoisting works with variables declared with var, let, and const. However, variables declared with var are hoisted with a default value of undefined, whereas variables declared with let and const are hoisted but not initialized with a default value.
If you're one of those that thought only variables declared with var are hoisted, I hope this article clears your assumption.