Hoisting — Complete Guide
Hoisting — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of JavaScript Tutorial on Toolliyo Academy.
On this page
JavaScript Tutorial · Lesson 9 of 100
Hoisting
Basics → Objects & data → Async & DOM → Advanced → Tools → Projects
Beginner · 1 — Learn by example · ~6 min · JS Tutorial — Basics
What is this?
Hoisting is JavaScript reading declarations before running your code. var and function declarations are hoisted; let and const are hoisted but stay in the "temporal dead zone" until their line runs.
Why should you care?
This explains why console.log(x) might print undefined with var but throw with let — a common interview and debugging topic.
See it live — copy this example
Paste into an HTML file or the browser console (F12). Use Run below when the live editor is available.
console.log(a); // undefined
var a = 5;
// console.log(b); // ReferenceError
let b = 10;
Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- var a is hoisted and starts as undefined until assignment.
- let b cannot be used before its declaration line.
Practice next
- Run the var example and note undefined before assignment.
- Try the let example and read ReferenceError.
- Declare function hoisted() {} after a call — see it works.
- Add a var b = 2 after console.log(b) in the same block.
- Use a function declaration called before its definition in the file.
Remember
var is hoisted as undefined let/const cannot be used before declaration Declare variables before use
ScriptVerse legacy script
Maintainers refactor old var-heavy code where variables were used before declaration, causing subtle undefined bugs.
Outcome: Understanding hoisting explains mysterious undefined values in production logs.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!