How JavaScript Closures Work: A Beginner-Friendly Guide

By the end of this page, you will understand what a JavaScript closure is, why it happens automatically, how inner functions remember variables from their outer scope, and where closures are useful in real code such as event handlers, factories, callbacks, and data privacy patterns.

A closure happens when a function remembers variables from the place where it was created, even after that outer code has finished running.

In JavaScript, functions do not only carry their code. They also keep access to the lexical scope in which they were defined. That means an inner function can still use variables from an outer function later.

Here is the key idea:

function outer() {
  let count = 0;

  function inner() {
    count++;
    return count;
  }

  return inner;
}

const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

Why does this work?

• outer() runs and creates count
• inner() is defined inside outer()
• outer() returns inner
• Even after outer() finishes, still remembers

Think of a closure like a backpack that a function carries around.

• The function is the person
• The outer variables are items placed into the backpack
• When the function goes elsewhere, it still has access to those items

Example:

function makeGreeter(name) {
  return function () {
    console.log(`Hello, ${name}!`);
  };
}

const greetAlice = makeGreeter("Alice");
greetAlice(); // Hello, Alice!

Even though makeGreeter has already finished, the returned function still has name in its backpack.

Another useful way to think about it:

• A variable is not copied into the function as plain text
• The function keeps access to the actual variable from its original scope
• If that variable changes, the closure sees the updated value

Basic syntax

A closure usually appears when:

1. A function is created inside another function
2. The inner function uses a variable from the outer function
3. The inner function is used later

function outer() {
  let message = "Hello";

  function inner() {
    console.log(message);
  }

  return inner;
}

const fn = outer();
fn(); // Hello

Example: private counter

function createCounter() {
  let count = 0;

  return function () {
    count += 1;
    return count;
  };
}

const counterA = createCounter();
const counterB = createCounter();

console.log(counterA()); // 1
.(()); 
.(()); 

Consider this example:

function makeCounter() {
  let count = 0;

  return function () {
    count = count + 1;
    return count;
  };
}

const counter = makeCounter();
console.log(counter());
console.log(counter());

Step-by-step

1. makeCounter is defined

At this point, nothing runs yet. JavaScript only stores the function definition.

2. makeCounter() is called

const counter = makeCounter();

Inside this call:

• A new local variable count is created with value 0
• A new inner function is created
• That inner function uses count

Closures are common in real JavaScript programs.

1. Event handlers

function setupButton(message) {
  return function () {
    console.log(message);
  };
}

const handleClick = setupButton("Button clicked");

The event handler remembers the message it was created with.

2. Timers and callbacks

function delayedGreeting(name) {
  setTimeout(function () {
    console.log(`Hello, ${name}`);
  }, 1000);
}

The callback remembers name even though it runs later.

3. Data privacy

function createBankAccount() {
  let balance = 0;

  return {
    () {
      balance += amount;
    },
    () {
       balance;
    }
  };
}

In real projects, closures are often used as small building blocks rather than as isolated examples.

Common patterns

Guarded configuration

function createLogger(level) {
  return function log(message) {
    if (!message) return;
    console.log(`[${level}] ${message}`);
  };
}

The returned logger remembers its configured level.

Validation helpers

function minLength(length) {
  return function (value) {
    return value.length >= length;
  };
}

const isLongEnough = minLength(8);

This pattern is common in form validation.

Array methods with closures

 () {
    () {
     value > limit;
  };
}

 numbers = [, , , ];
 result = numbers.(());
.(result); 

1. Thinking closures copy values once

Closures keep access to variables, not just a frozen copy.

let value = 1;

function showValue() {
  console.log(value);
}

value = 2;
showValue(); // 2

The function sees the current value of value.

2. Confusing separate closures with shared state

function makeCounter() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}

const a = makeCounter();
const b = makeCounter();

a and b do not share the same count.

3. Using var in loops incorrectly

Closures vs related ideas

Closure vs object for state

function createCounterClosure() {
  let count = ;
    () {
     ++count;
  };
}

 counter = {
  : ,
  () {
     ++.;
  }
};

Closure quick reference

Definition

A closure is a function that remembers variables from its outer lexical scope.

Common pattern

function outer() {
  let value = 10;

  return function inner() {
    return value;
  };
}

Key rules

• Functions can access variables from outer scopes
• Returned inner functions can keep using those variables later
• Each call to the outer function usually creates a new closure
• Closures remember variables, not just initial values
• Closures are created automatically in JavaScript

Useful for

• Private state
• Counters
• Event handlers
• Callbacks
• Function factories
• Validation helpers

Loop warning

Prefer let over var in loops when closures are involved.

Mental shortcut

A closure is a function plus its remembered scope.

What is a closure in JavaScript?

A closure is a function that keeps access to variables from the scope where it was created, even after that outer scope has finished.

Why are closures useful?

They help preserve state, create private data, configure reusable functions, and make callbacks more powerful.

Are closures created manually?

No. JavaScript creates them automatically whenever a function uses variables from an outer scope.

Do closures copy variable values?

Usually no. They keep access to the variable itself, so they can see updated values.

Are closures only used with returned functions?

No. They also appear in callbacks, event handlers, timers, and methods defined inside other functions.

Can closures cause bugs?

Yes. A common issue is using var in loops, causing multiple functions to share the same variable.

Do closures affect memory?

They can keep referenced data alive longer, so avoid capturing large unnecessary objects.

Are closures the same as private variables?

Not exactly, but closures are one common way to create private state in JavaScript.

Lexical scope

Closures depend on lexical scope because functions look up variables based on where they are defined.

Scope chain

A closure uses the scope chain to find variables in outer functions and global scope.

Functions in JavaScript

Closures are built on how JavaScript functions are defined, returned, and passed around.

let, const, and var

These affect variable scope and are especially important in closure behavior inside loops.

Callbacks

Many callbacks are closures because they use variables from the surrounding code.

Higher-order functions

Functions that return functions or accept functions often rely on closures.

Object state vs closure state

Both store data, but closures can keep data private without exposing object properties.

Modules

Module patterns often use closures to encapsulate private data and expose only selected functions.