Understanding Hoisting in JavaScript

Variable and Function Hoisting — How does it work?

In Javascript variables and functions are all hoisted to the top of the page in which they are declared — with being either a global or function scope. Variable and function hoisting is basically the process in which the Javascript interpreter looks ahead in the code for all of the variable and function declarations and then hoists all of those declarations to the top of the file. Let me show you what all of this means by showing you an example.

Let's say that we have a variable color defined —

var color = 'blue'

Behind the scenes, this is what the Javascript interpreter is doing:

Javascript hoists our variable color to the top of the file and declares is there but it does not set it equal to anything, then as the interpreter moves through the file to where the variable was initially declared and sets the variable equal to the correct value which is blue.

// 1. Variable hoisted to the top of the page
var color;
color = 'blue'

Let’s say we wanted to console log our variable like this:

// 1. Variable hoisted to the top of the page
var color;
console.log(color)
color = 'blue'
console.log(color)

What’s going to happen is that Javascript will run through the file and the variable will be undefined since it has not hit the declared color variable yet, once it runs into the variable value it will log out the color. See below:

You can see our first console log was undefined and the second console log was the value blue since it ran through the file and set the color variable equal to blue. The repl.it example is how the var color = 'blue' functions underneath the hood.

Function hoisting works the same exact way, below we have a function getSum which simply returns the sum of the two numbers that will be passed in. When a function is declared in this format by using the var, let, or const keyword, it is called a function expression.

var getSum = function(num1, num2) {
   return num1 + num2
}

So if we try to console log getSum above to where it is being declared we will get an error message returned because var getSum; is being hoisted to the top of the page and not being assigned any value yet. By the time it hits the console log, it is simply undefined… Try running the function below:

In the below example if we move the console log below the function then we will actually get a proper result. Now you can see that variable and function hosting works the same way in Javascript.

Function Expression

We can also declare a function without the var, let, or const keywords — which is called a function declaration. One difference to note between a function expression vs a function declaration is that they are hoisted differently. For a function declaration, the whole function including its definition is hoisted to the top of the file. So now if we console log the getSum function above where it is defined it should work properly. SEE BELOW:

Function Declaration

Using function declarations instead of function expressions can be very useful in your code because the whole function is hoisted to the top of the file or the top of the scope.