JavaScript Hoisting

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

There are some different behaviors that occur when using a function declaration vs a function expression.

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

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

Suppose we have a function:

function cat() {
  alert("I'm a cat that meows!")
}

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

cat()
function cat() {
  alert("I'm a cat that meows!")
}

This only happens with functions and not function expressions.

When you assign a function to a variable, that is a function expression:

cat()
var cat = function() {
  alert("I'm a cat that meows!")
}

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

var cat = undefined
cat()
cat = function() {
  alert("I'm a cat that meows!")
}

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

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

const cat = function cat() {
  alert("I'm a cat that meows!")
}

const cat = function () {
  alert("I'm a cat that meows!")
}

or

let cat = function cat() {
  alert("I'm a cat that meows!")
}

let cat = function () {
  alert("I'm a cat that meows!")
}

In this case, if you invoke cat() before declaring it, it will give you a ReferenceError: 'cat' is not defined 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: is not defined error.

A simple tip:

1. If you are not re-assigning a variable value, it's better to use const, otherwise use let.

Example:

Don't do it

const meow = 'meow'
meow = 'meow, Angry cat!!! 

This will not work - It will give you a SyntaxError: Invalid or unexpected token

Instead:

let meow = 'meow'
meow = 'meow, Angry cat!!! 

Summary:

All function declarations are hoisted to the top of the current scope before any Javascript is executed.

We can call a function declaration before it’s defined, and our code will work.

function expressions are hoisted and initialized with undefined as a value, so this will give you an error.

If you are not re-assigning a variable value, it's better to use const, otherwise use let.

Comments

[Ryan B]

Thanks, i was looking for this after seeing vue mixins, but i forget the name of it.

[Santiago Correa]

Glad it helped!