Tutorials JavaScript Tutorial

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

BasicsObjects & dataAsync & DOMAdvancedToolsProjects

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.

Code
Result

What happened?

  • var a is hoisted and starts as undefined until assignment.
  • let b cannot be used before its declaration line.

Practice next

  1. Run the var example and note undefined before assignment.
  2. Try the let example and read ReferenceError.
  3. Declare function hoisted() {} after a call — see it works.
  4. Add a var b = 2 after console.log(b) in the same block.
  5. 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.

Junior PDF Detailed
What is hoisting?
Short answer: Hoisting is JavaScript’s behavior of moving variable and function declarations to the top of their scope. Example: console.log(a); // undefined var a = 5; Example code Hoisting is JavaScript’s behavior of m…
Junior PDF Detailed
What is the difference between inline-block and block?
Short answer: block elements take full width and start on a new line. inline-block behaves like inline (stays in the same line) but allows setting width, height, margin, and padding. Example code .block { display: block;…
Mid PDF Detailed
Explain the difference between HTML4 and HTML5.
Short answer: HTML5 is the modern evolution of HTML4, introducing better structure, multimedia support, and APIs. Explain a bit more Follow me on LinkedIn: HTML4 mainly focused on document markup, while HTML5 focuses on…
Mid PDF Detailed
Class selector: Targets elements with a class.?
Short answer: .highlight { background: yellow; } .highlight { background: yellow; } .highlight { background: yellow; } .highlight { background: yellow; } .highlight { background: yellow; } .highlight { background: yellow…
Mid PDF Detailed
How does the browser parse and render HTML?
Short answer: When a browser loads a webpage, it goes through these main steps: Real-world example (ShopNest) ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling…
Questions on this lesson 0

Sign in to ask a question or upvote helpful answers.

No questions yet — be the first to ask!

JavaScript Tutorial
Course syllabus

JavaScript Tutorial

Tutorial — Basics
Control Flow & Functions
Objects & Collections
Strings, Dates & RegEx
Async JavaScript
HTML DOM & Web APIs
Advanced
Performance & Security
Testing & Tooling
Projects
Toolliyo Assistant
Ask about tutorials, ebooks, training, pricing, mentor services, and support. I use public site content only—not admin or internal tools.

care@toolliyo.com

Need callback? Share your details