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.
This site was created and is maintained by Sean C Davis. It was designed by Matt Willett.
The stack is Gatsby, Tailwind CSS, and loads of other open-source software. The code is built, deployed, and hosted with help from GitHub and Netlify.
And here's a super important legal document Sean made up.