Hoisting is a concept or behavior in JavaScript where the declaration of a function, variable, or class goes to the top of the scope they were defined in. What does this mean?
Hoisting is a concept you may find in some programming languages (such as JavaScript) and not in others. It's a special behavior of the JavaScript interpreter. We'll learn about how it works in this article.
Let's start with functions.
I have a video version of this topic which you can check out.
Function Hoisting
Take a look at this code example:
function printHello() {
console.log("hello")
}
printHello()
// hello
Here, we declare printHello, and we execute the function just after the line it was declared. No errors; everything works!
Now look at this example:
printHello()
// hello
function printHello() {
console.log("hello")
}
Here, we execute printHello before the line the function was declared. And everything still works without errors. What happened here? Hoisting.
Before the interpreter executes the whole code, it first hoists (raises, or lifts) the declared function to the top of the scope it is defined in. In this case, printHello is defined in the global scope, so the function is hoisted to the top of the global scope. Through hoisting, the function (including the logic) becomes accessible even before the line it was declared in the code.
Let's see another example:
printHello()
// hello
printDillion()
// ReferenceError: printDillion is not defined
function printHello() {
console.log('hello')
function printDillion() {
console.log("dillion")
}
}
As you see here, we declare printHello. In this function, we first execute console.log('hello') then we declare another function called printDillion which executes console.log('dillion') when called.
Before printHello is declared in the code, we try to access it by executing printHello(). It's accessible (since it is hoisted to the top of the global scope), so we have "hello" printed on the console.
But then we try to access printDillion, and we get a reference error: printDillion is not defined. Does hoisting not occur on printDillion?
printDillion is hoisted, but it is only lifted to the top of the scope it was declared in. In this case, it is declared in a local scope--in printHello. Therefore, it would only be accessible in the function. Let's update our code:
printHello()
// hello
function printHello() {
printDillion()
// dillion
console.log('hello')
function printDillion() {
console.log("dillion")
}
}
Now, we execute printDillion in printHello before the line where printDillion was actually declared. Since the function is hoisted to the top of the local scope, we're able to access it before the line where it was actually declared.
Hoisting makes all these possible for function declarations. But, it's also worth noting that hoisting does not occur on function expressions. I explained the reason for this here: Function Declarations vs Function Expressions
Now let's look at hoisting for variables.
Variable Hoisting
You can declare variables in JavaScript with the var, let, and const variables. And these variable declarations would be hoisted, but behave differently. Let's start with var.
Hoisting var variables
Take a look at this example:
console.log(name)
// undefined
var name = "Dillion"
Here, we declare a variable called name with a string value of "Dillion". But, we try to access the variable before the line it was declared. But we don't get any errors. Hoisting happened. The name declaration is hoisted to the top, so the interpreter "knows" that there is a variable called name. If the interpreter did not know, you would get name is not defined. Let's try it out:
console.log(name)
// ReferenceError: name is not defined
var myName = "Dillion"
We have a variable called myName but no name. We get the name is not defined error when we try to access name. The interpreter "does not know" about this variable.
Coming back to our example above:
console.log(name)
// undefined
var name = "Dillion"
Although hoisting happened here, the value of name is undefined when we access it before the line of declaration. With variables declared var, the variable declaration is hoisted but with a default value of undefined. The actual value is initialized when the declaration line is executed.
By accessing the variable after that line, we get the actual value:
console.log(name)
// undefined
var name = "Dillion"
console.log(name)
// Dillion
Let's say we declared name in a function:
print()
console.log(name)
// ReferenceError: name is not defined
function print() {
var name = "Dillion"
}
Here, we get a reference error: name is not defined. Remember, variables are hoisted but only to the top of the scope they were declared in. In this case, name is declared in print, so it will be hoisted to the top of that local scope. Let's try to access it in the function:
print()
function print() {
console.log(name)
// undefined
var name = "Dillion"
}
By trying to access name in the function, even though it's above the line of declaration, we do not get an error. That's because name is hoisted, but don't forget, with a default value of undefined.
Hoisting let variables
Although variables declared with let are also hoisted, they have a different behavior. Let's see an example:
console.log(name)
// ReferenceError: Cannot access 'name' before initialization
let name = "Dillion"
Here, we get a reference error: Cannot access 'name' before initialization. Do you notice that the error does not say name is not defined? That's because the interpreter is "aware" of a name variable because the variable is hoisted.
"Cannot access 'name' before initialization" occurs because variables declared with let do not have a default value when hoisted. As we saw in var, the variables have a default value of undefined until the line where the declaration/initialization is executed. But with let, the variables are uninitialized.
The variables are hoisted to the top of the scope they are declared in (local, global, or block), but are not accessible because they have not been initialized. This concept is also referred to as the Temporal Dead Zone.
They can only be accessible after the initialization line has been executed:
let name = "Dillion"
console.log(name)
// Dillion
By accessing name after the line it was declared and initialized, we get no errors.
Hoisting const variables
Just like let, variables declared with const are hoisted, but not accessible. For example:
console.log(name)
// ReferenceError: Cannot access 'name' before initialization
const name = "Dillion"
The same concept of a temporal dead zone applies to const variables. Such variables are hoisted to the top of the scope they are defined in (local, global, or block), but they remain inaccessible until the variables are initialized with a value.
const name = "Dillion"
console.log(name)
// Dillion
By accessing the variable after it has been initialized with a value (as you see above), everything works fine.
Moving onto hoisting for classes.
Class Hoisting
Classes in JavaScript are also hoisted. Let's see an example:
const Dog = new Animal("Bingo")
// ReferenceError: Cannot access 'Animal' before initialization
class Animal {
constructor(name) {
this.name = name
}
}
Here, we declare a class called Animal. We try to access this class (instantiate a Dog object) before it was declared. We get a reference error: Cannot access 'Animal' before initialization. What does this error remind you of?
Just like let and const variables, classes are hoisted to the top of the scope they are defined in, but inaccessible until they are initialized. We do not get "Animal is not defined", which shows that the interpreter "knows" that there is an Animal class (due to hoisting). But we cannot access that class until the line of initialization is executed.
Let's update the code:
class Animal {
constructor(name) {
this.name = name
}
}
const Dog = new Animal("Bingo")
console.log(Dog)
// { name: 'Bingo' }
After Animal has been initialized, it becomes accessible, so we can instantiate the Dog object from the class without errors.
Wrap Up
In some codebases, you may find a code similar to this:
function1()
function2()
function3()
// lines of code
// lines of code
function function1() {...}
function function2() {...}
function function3() {...}
The three functions here are called at the top but actually declared in the code at the bottom. This is possible, due to hoisting. The functions are hoisted to the top of the global scope (which is where they were defined) together with their logic, so they become accessible/executable even before the line they were defined.
It's different for the others. var variables are hoisted but with a default value of undefined. let and const variables, and classes are hoisted but inaccessible as they do not have a default initialization.
If you enjoyed this piece, please share it with others 🙏🏾