JavaScript Closures Explained — Simple Guide with Examples

Understand JavaScript closures: lexical scope, inner functions, and practical use cases in React, callbacks, and modules.

JavaScript Closures — Plain English

A closure is when an inner function remembers variables from its outer scope even after the outer function has finished. Closures power callbacks, event handlers, React hooks, and module patterns.

Why JavaScript closures Matters

Closures appear in React hooks, debounce utilities, and module patterns — interviewers and production code both assume you understand them.

An inner function that references outer variables keeps that outer scope alive — that's the closure developers debug daily.

JavaScript closures — Key Ideas You Must Know

Lexical scope — functions see where they were defined
Inner function closes over outer variables
Used in debounce, throttle, and factories
Common in interview questions
let/const block scope affects closures

JavaScript closures Code Example

JAVASCRIPT

function makeCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}
const counter = makeCounter();
counter(); // 1
counter(); // 2

Practice JavaScript closures with Free Lessons

Study functions and scope in the JavaScript tutorial on Sturdee, then implement a debounce utility.

Tip: Free interactive lesson: /tutorials/javascript/javascript_functions — practice JavaScript closures with runnable code on Sturdee.

JavaScript Closures Explained — FAQ

Frequently Asked Questions

Are closures memory leaks?+

Only if you hold references unnecessarily. They're a feature, not a bug.