JavaScript Hoisting

scorreaui

Santiago Correa

Posted on April 11, 2021

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!")
}
Enter fullscreen mode Exit fullscreen mode

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

cat()
function cat() {
  alert("I'm a cat that meows!")
}
Enter fullscreen mode Exit fullscreen mode

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!")
}
Enter fullscreen mode Exit fullscreen mode

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!")
}
Enter fullscreen mode Exit fullscreen mode

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!")
}
Enter fullscreen mode Exit fullscreen mode

or

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

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

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!!! 
Enter fullscreen mode Exit fullscreen mode

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

Instead:

let meow = 'meow'
meow = 'meow, Angry cat!!! 
Enter fullscreen mode Exit fullscreen mode

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.

💖 💪 🙅 🚩
scorreaui
Santiago Correa

Posted on April 11, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

JavaScript Hoisting
javascript JavaScript Hoisting

April 11, 2021