What is hoisting in JavaScript?

A brief explanation to what hoisting means in the JavaScript programming language

JavaScript before executing your code parses it, and adds to its own memory every function and variable declarations it finds, and holds them in memory. This is called hoisting.

We have some different behaviors for function declarations and function expressions.

With function declarations, we can call a function before it’s defined, and our code will work. In the other cases, we’ll have errors.

A general rule of thumb is to always define functions, variables, objects and classes before using them, to avoid surprises.

Suppose we have a function:

function bark() {
  alert('wof!')
}

Due to hoisting, we can technically invoke bark() before it is declared:

bark()
function bark() {
  alert('wof!')
}

With functions, this only happens for function declarations. Like in the case above.

Not with function expressions.

This is a function expression:

bark()
var bark = function() {
  alert('wof!')
}

In this case, the var declaration is hoisted and initialized with undefined as a value, something like this:

var bark = undefined
bark()
bark = function() {
  alert('wof!')
}

Running this code will give you a TypeError: bark is not a function error.

const and let declarations are hoisted, too, but they are not initialized to undefined like var.

const bark = function() {
  alert('wof!')
}

or

let bark = function bark() {
  alert('wof!')
}

In this case, if you invoke bark() before declaring it, it will give you a ReferenceError: Cannot access 'bark' before initialization error.

The same will happen for any other expression that assigns an object or class to a variable

Class declarations work like let and const declarations: they are hoisted, but not initialized, and using a class before its declaration will give a ReferenceError: <Class> is not defined error.