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 Node.js?

An brief introduction to Node.js, along with links to dig in further with a tutorial or course.

Jun 29, 2020

WTF is a Closure?

A brief explanation of JavaScript closures, along with a few examples and references to other in-depth explorations on the topic.

Aug 03, 2020

WTF is JavaScript?

A brief description of JavaScript, with a few links to dig in and learn more.

Jun 29, 2020