WTF is Hoisting?

Sometimes JavaScript code appears to behave oddly. Hoisting is one of the reasons why. Here's an introduction to the concept, with references to more in-depth explorations.

Hoisting is a JavaScript concept in which variable, function, and class definitions are hoisted (lifted) to the top of their lexical environment (their scope) before execution.

Consider the following:

console.log(foo); // => undefined

var foo = "bar";

In many other programming languages, this code would result in an error because we're trying to use foo before we've defined it. JavaScript works a little differently, as the code isn't executed strictly like it is written. Instead, under the hood, it works more like this:

var foo;

console.log(foo); // => undefined

foo = "bar";

Variables declared with var are hoisted to the top of their scope (the global scope in this example). This results in the variable being initialized but not assigned.

ES6 introduced let and const, which behave differently. While they are technically hoisted, an error will be thrown if they are used before they are declared.

console.log(foo); // => Cannot accesss 'foo' before initialization

let foo = "bar";

That's hoisting in nutshell, although there are plenty of additional nuances to explore. This article does a fantastic job of breaking them down. I highly recommend the read if you want to explore the topic further. And, though a little more technical, the MDN reference is always a great resource.

Let's Connect

Keep Reading

WTF is deep-for-each?

Explore an introduction to the super cool, single-function JavaScript package, deep-for-each.

Apr 16, 2020


A brief description of NPM.

Jun 29, 2020

WTF is Jest?

Learn the basics of the JavaScript testing framework, Jest.

Aug 23, 2021