JavaScript Hoisting, 'this', and 'new' Explained With Clear Mental Models

JavaScript's seemingly erratic behavior around hoisting, objects, 'this', and the 'new' keyword follows a consistent set of rules that are rarely explained clearly to beginners. Before executing code, JavaScript runs a creation phase where it scans the scope and registers all declarations in memory, before executing line by line in a second phase. Function declarations are fully hoisted and usable anywhere in their scope, while 'var' is hoisted but initialized as 'undefined', making it accessible but potentially misleading before assignment. Variables declared with 'let' and 'const' are also hoisted but remain in a Temporal Dead Zone until execution reaches their declaration line, throwing a ReferenceError if accessed early. Understanding these foundational mechanics helps developers predict JavaScript's behavior with confidence rather than treating it as unpredictable magic.