DEV Community

Brian Barbour
Brian Barbour

Posted on

13 6

Hoisting in JS: The Quick and Dirty

Before reading this, check out: Var and Function Scope

console.log(hoistAndRun()) // returns 'also hoisted and can be ran'
console.log(hoistMe) // returns undefined

var hoistMe = 'hoisted, but undefined'

function hoistAndRun() {
  return 'also hoisted and can be ran'
}
Enter fullscreen mode Exit fullscreen mode

The first thing to understand about hoisting is that it's a feature of Javascript. (I think some other languages have it too, like Python, but not all use it.) You'll see a lot of people explain it as variables (declared with var) and functions (using the function keyword) being "lifted" to the top of the code.

That's not accurate. Javascript doesn't do that, at least not physically. It's more of an analogy or conceptual way of thinking of it. Instead, Javascript creates space in memory for the variables and functions. Think of it as the programming equivalent of making a dinner reservation.

Hoisted var variables will return undefined. Because, you haven't assigned them a value (until you actually do with =). Functions can be ran immediately, because they are fully placed in memory before the code is ran.

Function expressions using var are are hoisted, but cannot be called right away.

console.log(hoistAndRunAgain()) // TypeError: hoistAndRunAgain is not a function

var hoistAndRunAgain = function() {
  return 'hoisted, but undefined as well'
}
Enter fullscreen mode Exit fullscreen mode

Variables and function expressions assigned with const and let are not hoisted, as they use block scope.

console.log(hoistConstant) // ReferenceError: hoistContant is not defined
console.log(hoistLet) //ReferenceError: hoistLet is not defined

const hoistConstant = 'not hoisted'
let hoistLet = 'not hoisted'
Enter fullscreen mode Exit fullscreen mode

That's the quick and dirty of hoisting as I understand it. There is probably more nuance and detail that could be provided about hoisting, but hopefully this is enough to get you started, or at least to jog your memory.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (1)

Collapse
 
georgecoldham profile image
George • • Edited

What really helped me understand

Link

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more