Spots 
You know that moment when JavaScript does something so weird you start suspecting your laptop is haunted? Or when this is your object in one line and undefined in the next, and you didn't change anything?
JavaScript isn't random. It follows a small set of rules, and nobody explains them well on day one. Once these four ideas click, a huge chunk of "JS magic" turns into "oh, that makes sense": Grab a coffee. Let's pop the hood. ☕ 1. Hoisting: JavaScript Reads Your Code Twice Here's the mental model that fixes most confusion:
Before JavaScript runs your code, it does a quick prep pass called the creation phase. During it, JS scans the scope and registers your declarations in memory. Then the execution phase runs your code line by line.
Hoisting is just a side effect of that prep pass. Your code isn't physically moved anywhere. Declarations are registered before execution begins. What each declaration gets during the creation phase depends on how you declared it. Functions, var, and let/const side by side Function declarations: fully hoisted
The entire function, body included, is stored during the creation phase. That's why it's callable from anywhere in its scope. var: hoisted, but only the name
JS sees var coffee, creates the variable, and sets it to undefined. The = "espresso" part only happens during execution. Behind the scenes it's like this: let and const: hoisted, but locked (the Temporal Dead Zone) Plain-English version of the Temporal Dead Zone (TDZ):
Imagine a restaurant reserves a table with your name on it. The table exists, but you can't sit down until your party arrives. Touch it early and the staff yells at you.
For let and const, the variable is registered in the creation phase, but it stays off-limits until execution reaches its declaration line. The stretch between the start of the scope and that line is the Temporal Dead Zone.
The error message says "cannot access before initialization", not "tea is not defined". That's proof tea was hoisted. JS knows about it but refuses to let you touch it yet. Gotchas that show up in interviews 🎯 Gotcha #1: Function expressions are NOT hoisted like declarations
Only the variable greet is hoisted (as undefined). Calling undefined() gives you a TypeError. With let/const you'd get a ReferenceError instead. Gotcha #2: The classic var in a loop
You know that moment when JavaScript does something so weird you start suspecting your laptop is haunted?