What Is a Closure, Really?
A closure is one of the most important concepts in JavaScript, yet it is often explained in abstract, confusing terms. Here is the simple version: a closure is a function that remembers and can access variables from the scope where it was created, even after that outer function has finished executing. Every function in JavaScript creates a closure, but the concept becomes powerful and interesting when an inner function outlives its parent. This guide explains closures through practical examples you will actually use in real codebases.
How Closures Work Under the Hood
To understand closures, you need to understand lexical scope. JavaScript determines variable access at the time a function is written (lexically), not at the time it is called.
// When a function is created, it captures a reference to its
// surrounding scope. This captured scope persists even after
// the outer function returns.
function createGreeter(greeting) {
// 'greeting' is captured by the inner function
return function(name) {
// This inner function is a closure. It "closes over"
// the 'greeting' variable from the outer scope.
return `${greeting}, ${name}!`;
};
}
const sayHello = createGreeter("Hello");
const sayHola = createGreeter("Hola");
console.log(sayHello("Alice")); // "Hello, Alice!"
console.log(sayHola("Bob")); // "Hola, Bob!"
// createGreeter has already returned, but the inner function
// still has access to 'greeting'. That is a closure.
The key insight is that sayHello and sayHola each have their own private copy of the greeting variable. They do not share state because each call to createGreeter creates a new scope.
Practical Use: Counters and State
Closures are the simplest way to create stateful functions without using classes or global variables.
function createCounter(initialValue = 0) {
let count = initialValue;
return {
increment() {
count += 1;
return count;
},
decrement() {
count -= 1;
return count;
},
reset() {
count = initialValue;
return count;
},
getCount() {
return count;
}
};
}
const counter = createCounter(10);
console.log(counter.increment()); // 11
console.log(counter.increment()); // 12
console.log(counter.decrement()); // 11
console.log(counter.reset()); // 10
// 'count' is completely private. There is no way to access
// or modify it except through the returned methods.
console.log(counter.count); // undefined
// Each counter is independent
const counterA = createCounter();
const counterB = createCounter(100);
counterA.increment();
counterA.increment();
console.log(counterA.getCount()); // 2
console.log(counterB.getCount()); // 100
Factory Functions
Closures power the factory function pattern, which creates specialized functions from a template.
// Tax calculator factory
function createTaxCalculator(taxRate, currency = "$") {
return function(amount) {
const tax = amount * (taxRate / 100);
const total = amount + tax;
return {
subtotal: `${currency}${amount.toFixed(2)}`,
tax: `${currency}${tax.toFixed(2)}`,
total: `${currency}${total.toFixed(2)}`,
rate: `${taxRate}%`
};
};
}
const calcUSA = createTaxCalculator(8.875, "$");
const calcUK = createTaxCalculator(20, "£");
const calcJapan = createTaxCalculator(10, "¥");
console.log(calcUSA(100));
// { subtotal: "$100.00", tax: "$8.88", total: "$108.88", rate: "8.875%" }
console.log(calcUK(100));
// { subtotal: "£100.00", tax: "£20.00", total: "£120.00", rate: "20%" }
// URL builder factory
function createAPIClient(baseURL) {
const headers = { "Content-Type": "application/json" };
return {
get(endpoint) {
return fetch(`${baseURL}${endpoint}`, { headers });
},
post(endpoint, data) {
return fetch(`${baseURL}${endpoint}`, {
method: "POST",
headers,
body: JSON.stringify(data),
});
},
setHeader(key, value) {
headers[key] = value;
}
};
}
const api = createAPIClient("https://api.example.com");
// api.get("/users") -- fetches https://api.example.com/users
// api.post("/tasks", { title: "New task" })
api.setHeader("Authorization", "Bearer token123");
Event Handlers and Callbacks
Closures are essential in event-driven programming. They let event handlers remember context from when they were registered.
// Debounce function: delays execution until user stops typing
function debounce(fn, delay) {
let timeoutId = null;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
// Usage:
// const handleSearch = debounce((query) => {
// console.log("Searching for:", query);
// fetchSearchResults(query);
// }, 300);
// searchInput.addEventListener("input", (e) => handleSearch(e.target.value));
// Rate limiter: ensures a function runs at most once per interval
function rateLimit(fn, interval) {
let lastCallTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastCallTime >= interval) {
lastCallTime = now;
return fn.apply(this, args);
}
};
}
// Memoization: caches function results
function memoize(fn) {
const cache = new Map();
return function(...args) {
const key = JSON.stringify(args);
if (cache.has(key)) {
console.log(`Cache hit for ${key}`);
return cache.get(key);
}
const result = fn.apply(this, args);
cache.set(key, result);
return result;
};
}
const expensiveCalc = memoize((n) => {
console.log(`Computing fibonacci(${n})...`);
if (n <= 1) return n;
return expensiveCalc(n - 1) + expensiveCalc(n - 2);
});
console.log(expensiveCalc(10)); // Computes and caches
console.log(expensiveCalc(10)); // Cache hit!
Data Privacy and Encapsulation
Before ES6 classes and private fields, closures were the primary way to create private variables in JavaScript. They are still useful for lightweight encapsulation.
function createBankAccount(owner, initialBalance = 0) {
let balance = initialBalance;
const transactions = [];
function recordTransaction(type, amount) {
transactions.push({
type,
amount,
balance,
timestamp: new Date().toISOString(),
});
}
return {
getOwner() {
return owner;
},
getBalance() {
return balance;
},
deposit(amount) {
if (amount <= 0) throw new Error("Deposit must be positive");
balance += amount;
recordTransaction("deposit", amount);
return balance;
},
withdraw(amount) {
if (amount <= 0) throw new Error("Withdrawal must be positive");
if (amount > balance) throw new Error("Insufficient funds");
balance -= amount;
recordTransaction("withdrawal", amount);
return balance;
},
getStatement() {
return [...transactions]; // Return a copy
}
};
}
const account = createBankAccount("Alice", 1000);
account.deposit(500);
account.withdraw(200);
console.log(account.getBalance()); // 1300
console.log(account.getStatement()); // [{...}, {...}]
// Cannot access internals directly:
console.log(account.balance); // undefined
console.log(account.transactions); // undefined
Common Closure Pitfalls
// PITFALL: Loop variable capture with var
// The classic closure-in-a-loop bug
for (var i = 0; i < 3; i++) {
setTimeout(() => console.log("var:", i), 100);
}
// Prints: var: 3, var: 3, var: 3 (not 0, 1, 2!)
// All closures share the same 'i' variable, which is 3 after the loop.
// FIX 1: Use let (block-scoped, creates new binding per iteration)
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log("let:", i), 100);
}
// Prints: let: 0, let: 1, let: 2
// FIX 2: IIFE (Immediately Invoked Function Expression)
for (var i = 0; i < 3; i++) {
(function(j) {
setTimeout(() => console.log("iife:", j), 100);
})(i);
}
// Prints: iife: 0, iife: 1, iife: 2
// PITFALL: Memory leaks from unintended retention
function createHandler() {
const hugeData = new Array(1000000).fill("x"); // 1M elements
return function() {
// If this closure references hugeData, it cannot be garbage collected
console.log(hugeData.length);
};
}
// Solution: only close over what you need
function createHandlerFixed() {
const hugeData = new Array(1000000).fill("x");
const length = hugeData.length; // Extract what you need
return function() {
console.log(length); // hugeData can now be garbage collected
};
}
Key Takeaways
Closures are not an advanced feature to be feared; they are a fundamental part of how JavaScript works. Every time you pass a callback, create a factory function, or use debounce or memoize, you are using closures. The core rule is simple: a function retains access to the variables in its lexical scope. This enables powerful patterns like data privacy, stateful functions, and function factories without the overhead of classes. Be mindful of the loop variable pitfall (use let instead of var) and watch for unintended memory retention. With these patterns in your toolkit, you will write cleaner, more modular JavaScript.
