Lesson 16/100

Tutorials JavaScript Tutorial

Closures — Complete Guide

Closures — 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 16 of 100

Closures

BasicsObjects & dataAsync & DOMAdvancedToolsProjects

Beginner · 1 — Learn by example · ~6 min · JS Control Flow & Functions

What is this?

A closure is when an inner function remembers variables from the outer function, even after the outer function has finished running.

Why should you care?

Closures power counters, private data, and callbacks — they appear in almost every real JavaScript app.

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.

function makeCounter() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}
const counter = makeCounter();
console.log(counter());
console.log(counter());

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

Code
Result

What happened?

  • makeCounter returns an inner function.
  • That inner function closes over count, so count stays alive between calls.

Practice next

  1. Run counter() five times and watch count grow.
  2. Create two counters with makeCounter() and show separate counts.
  3. Trace count on paper through each call.
  4. Add a reset() method using a closure that sets count back to 0.
  5. Build makeMultiplier(factor) that returns a function multiplying by factor.

Remember

Inner functions remember outer variables Used for private state Very common in callbacks

ScriptVerse rate limiter

A private attempt counter inside a login form closure tracks failed tries without exposing count on window.

Outcome: Closures hide internal state while exposing only safe public functions.

Interview prep for this lesson

Practice these questions aloud after reading—each links to a full structured answer.

Mid PDF Detailed
What are JavaScript closures and how are they used?
Short answer: A closure is created when a function remembers variables from its outer scope, even after that outer function has finished executing. Example: function makeCounter() { let count = 0; Example code return fun…
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