Closures in Javascript - Deep Dive

Overview - Closures

What is it?

A closure is a special feature in JavaScript where a function remembers the variables from the place where it was created, even if it runs somewhere else later. This means the function keeps access to its original environment. Closures let functions keep data private and create powerful patterns for managing information.

Why it matters

Closures solve the problem of keeping data safe and accessible only where needed, without using global variables. Without closures, JavaScript would struggle to manage private data and create flexible, reusable code. This would make programs harder to organize and maintain, especially as they grow bigger.

Where it fits

Before learning closures, you should understand functions, variable scope, and how JavaScript handles execution contexts. After mastering closures, you can explore advanced topics like modules, callbacks, asynchronous programming, and functional programming patterns.

Mental Model

Core Idea

A closure is a function that carries its original environment with it, remembering variables from where it was created even when called elsewhere.

Think of it like...

Imagine a backpack that a traveler always carries. Inside the backpack are tools and notes from their home. No matter where the traveler goes, they can use these items because they brought them along. The function is the traveler, and the variables are the items in the backpack.

Function Creation
  ┌───────────────┐
  │ Outer Function│
  │  Variables    │
  └──────┬────────┘
         │
         ▼
  ┌───────────────┐
  │ Inner Function│
  │ (Closure)     │
  └───────────────┘

When Inner Function runs later, it still accesses Outer Function's Variables.

Build-Up - 7 Steps

1

Foundation

Understanding Function Scope Basics

Concept: Learn how variables are accessible inside functions and their inner blocks.

In JavaScript, variables declared inside a function are only available within that function. For example: function greet() { let message = 'Hello'; console.log(message); } greet(); // prints 'Hello' Trying to access 'message' outside greet() causes an error.

Result

The variable 'message' is only visible inside the greet function.

Understanding that functions create their own variable space is key to grasping how closures keep variables alive.

2

Foundation

Nested Functions and Variable Access

Concept: Functions inside other functions can access variables from their outer functions.

When a function is defined inside another, the inner function can use variables from the outer one: function outer() { let count = 0; function inner() { console.log(count); } inner(); } outer(); // prints 0

Result

The inner function can read the outer function's variable 'count'.

This shows that inner functions have access to their surrounding environment, a foundation for closures.

3

Intermediate

Closure: Function Retains Outer Variables

🤔Before reading on: do you think the inner function can still access outer variables after the outer function finishes? Commit to yes or no.

Concept: A function keeps access to variables from its creation scope even after that scope ends.

Consider this code: function makeCounter() { let count = 0; return function() { count += 1; return count; }; } const counter = makeCounter(); console.log(counter()); // 1 console.log(counter()); // 2 The returned function remembers 'count' even though makeCounter has finished.

Result

The counter function increases and remembers 'count' across calls.

Knowing that functions carry their environment lets you create private data that persists between calls.

4

Intermediate

Using Closures for Data Privacy

🤔Before reading on: can closures help hide variables from outside code? Commit to yes or no.

Concept: Closures can keep variables hidden from the outside world, exposing only what you want.

Example: function secretHolder(secret) { return { getSecret: function() { return secret; }, setSecret: function(newSecret) { secret = newSecret; } }; } const obj = secretHolder('my secret'); console.log(obj.getSecret()); // 'my secret' obj.setSecret('new secret'); console.log(obj.getSecret()); // 'new secret' The variable 'secret' is not accessible directly, only through methods.

Result

The secret variable is private and controlled via closure functions.

Understanding closures enables encapsulation, a key principle in writing safe and maintainable code.

5

Intermediate

Common Closure Pitfall: Loop Variables

🤔Before reading on: when creating functions in a loop, do all functions share the same variable or get their own copy? Commit to your answer.

Concept: Functions created in loops may share the same variable, causing unexpected results.

Example: const funcs = []; for (var i = 0; i < 3; i++) { funcs.push(function() { return i; }); } console.log(funcs[0]()); // 3 console.log(funcs[1]()); // 3 console.log(funcs[2]()); // 3 All functions return 3 because 'i' is shared and changed. Fix with let: const funcs2 = []; for (let j = 0; j < 3; j++) { funcs2.push(function() { return j; }); } console.log(funcs2[0]()); // 0 console.log(funcs2[1]()); // 1 console.log(funcs2[2]()); // 2

Result

Using let creates a new variable for each loop iteration, fixing closure issues.

Knowing how variable declarations affect closures prevents common bugs in asynchronous or looped code.

6

Advanced

Closures and Memory Management

🤔Before reading on: do closures always cause memory leaks? Commit to yes or no.

Concept: Closures keep variables alive, which can increase memory use if not managed carefully.

Because closures hold references to variables, those variables stay in memory as long as the closure exists. For example: function create() { let largeData = new Array(1000000).fill('*'); return function() { return largeData.length; }; } const fn = create(); // largeData stays in memory because fn uses it If you lose reference to fn, memory frees. But if you keep fn, memory stays used.

Result

Closures can increase memory usage by keeping data alive longer.

Understanding closure memory behavior helps write efficient code and avoid leaks.

7

Expert

Closures in JavaScript Engine Internals

🤔Before reading on: do you think closures are implemented by copying variables or by referencing them? Commit to your answer.

Concept: Closures work by keeping references to the original variables, not copies, allowing dynamic updates.

JavaScript engines create an environment record for each function scope. When a closure is created, it keeps a reference to this environment. Variables are not copied; changes to variables are visible inside closures. This is why closures reflect the latest variable values, not snapshots. This referencing model is efficient and allows dynamic behavior but requires careful handling to avoid bugs.

Result

Closures reflect live variables, not copies, enabling dynamic and flexible code.

Knowing closures reference environments explains why variable changes affect closures and helps debug tricky issues.

Under the Hood

When a function is created, JavaScript stores its scope chain, which includes all variables accessible at that point. A closure is formed when an inner function retains a reference to this scope chain even after the outer function finishes. Instead of copying variables, the closure keeps live references, so any changes to those variables are visible inside the closure. The JavaScript engine manages these references in memory, ensuring variables stay alive as long as needed.

Why designed this way?

Closures were designed to enable powerful abstraction and data encapsulation in JavaScript, a language without built-in private variables. By referencing environments rather than copying, closures remain efficient and dynamic, allowing functions to share and update data seamlessly. Alternatives like copying variables would waste memory and lose dynamic updates, reducing flexibility.

┌───────────────────────────────┐
│ Outer Function Scope           │
│ ┌───────────────┐             │
│ │ Variables     │             │
│ │ count = 0     │             │
│ └──────┬────────┘             │
│        │                      │
│        ▼                      │
│ ┌───────────────┐             │
│ │ Inner Function│◄────────────┘
│ │ (Closure)     │
│ └───────────────┘
│ References outer variables live
└───────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does a closure copy variables or keep references? Commit to your answer.

Common Belief: Closures make copies of variables at creation time, so changes outside don't affect them.

Reality: Closures keep references to variables, so changes to those variables are seen inside the closure.

Why it matters: Believing closures copy variables leads to confusion when closures show updated values unexpectedly.

Quick: Do closures always cause memory leaks? Commit to yes or no.

Common Belief: Closures always cause memory leaks because they keep variables alive forever.

Reality: Closures keep variables alive only as long as the closure itself is reachable; once unreachable, memory is freed.

Why it matters: Thinking closures always leak memory can cause unnecessary fear and avoidance of useful patterns.

Quick: Can closures be used to create private variables? Commit to yes or no.

Common Belief: JavaScript does not support private variables, so closures can't create them.

Reality: Closures are a primary way to create private variables by hiding data inside function scopes.

Why it matters: Not knowing this limits how developers design secure and modular code.

Quick: Do functions created in loops always get their own variable copies? Commit to yes or no.

Common Belief: Each function in a loop automatically gets its own copy of the loop variable.

Reality: If using var, all functions share the same variable; only let creates new bindings per iteration.

Why it matters: Misunderstanding this causes bugs where all functions return the same value unexpectedly.

Expert Zone

1

Closures keep references to variables, so if the variable changes after closure creation, the closure sees the updated value, which can surprise developers expecting snapshots.

2

JavaScript engines optimize closures by creating environment records only when necessary, improving performance in many cases.

3

Closures can capture variables from multiple nested scopes, not just the immediate outer function, enabling complex data sharing patterns.

When NOT to use

Closures are not ideal when you need simple, stateless functions or when managing very large data that could cause memory overhead. In such cases, consider using classes with private fields or modules with explicit state management.

Production Patterns

Closures are widely used in event handlers, callback functions, module patterns for encapsulation, and functional programming techniques like currying and partial application. They enable private state in libraries and frameworks, and help manage asynchronous code by preserving context.

Connections

Object-Oriented Encapsulation

Closures provide a way to encapsulate data similar to private fields in objects.

Understanding closures helps grasp how encapsulation hides data and controls access, a core idea in object-oriented design.

Functional Programming

Closures enable higher-order functions and function factories, foundational in functional programming.

Knowing closures unlocks powerful functional patterns like currying, memoization, and lazy evaluation.

Memory Management in Operating Systems

Closures relate to how OS manages variable lifetimes and references in memory.

Understanding closures deepens appreciation for memory allocation, garbage collection, and resource management beyond programming.

Common Pitfalls

#1 Loop functions sharing the same variable cause unexpected results.

Wrong approach:

const funcs = [];
for (var i = 0; i < 3; i++) {
funcs.push(function() { return i; });
}
console.log(funcs[0]()); // 3 (unexpected)
console.log(funcs[1]()); // 3
console.log(funcs[2]()); // 3

Correct approach:

const funcs = [];
for (let i = 0; i < 3; i++) {
funcs.push(function() { return i; });
}
console.log(funcs[0]()); // 0
console.log(funcs[1]()); // 1
console.log(funcs[2]()); // 2

Root cause:

Using var declares a single variable shared across iterations; let creates a new binding each time.

#2 Expecting closures to copy variable values at creation time.

Wrong approach:

function make() {
let x = 1;
return function() { return x; };
}
const fn = make();
x = 2; // trying to change x outside
console.log(fn()); // expecting 1 but gets 1 anyway (no effect)

Correct approach:

function make() {
let x = 1;
return function() { return x; };
}
const fn = make();
// x outside is different variable, closure keeps original x
console.log(fn()); // 1

Root cause:

Closure keeps reference to its own scope variable, not any external variable with the same name.

#3 Keeping large data in closures unintentionally causing memory bloat.

Wrong approach:

function create() {
let bigData = new Array(1000000).fill('*');
return function() { return bigData.length; };
}
const fn = create();
// fn kept forever, bigData never freed

Correct approach:

function create() {
let bigData = new Array(1000000).fill('*');
return function() { return bigData.length; };
}
const fn = create();
// When fn no longer needed, set fn = null to free memory

Root cause:

Closure keeps references alive, so memory is not freed until closure is unreachable.

Key Takeaways

Closures let functions remember and access variables from where they were created, even after that place has finished running.

They enable private data and encapsulation by hiding variables inside function scopes.

Closures keep references to variables, not copies, so changes to those variables affect the closure.

Understanding how closures work prevents common bugs, especially in loops and asynchronous code.

Closures impact memory usage because they keep variables alive as long as the closure exists.

Practice

1. What is a closure in JavaScript?

easy

A. A function that has no parameters

B. A function that runs only once

C. A function that returns another function without variables

D. A function that remembers variables from its creation context

Solution

1. Step 1: Understand closure definition

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

2. Step 2: Match definition to options

   A function that remembers variables from its creation context correctly describes this behavior, while others describe unrelated concepts.

3. Final Answer:

   A function that remembers variables from its creation context -> Option D

4. Quick Check:

   Closure = function remembering variables [OK]

Hint: Closures remember variables from where they were made [OK]

Common Mistakes:

• Thinking closures are functions without parameters
• Confusing closures with immediately invoked functions
• Believing closures only run once

2. Which of the following is the correct syntax to create a closure in JavaScript?

easy

A. function outer() { let x = 5; function inner() { return x; } }

B. function outer() { let x = 5; return x; }

C. function outer() { let x = 5; return function inner() { return x; } }

D. function outer() { return function() { let x = 5; } }

Solution

1. Step 1: Identify closure syntax

   A closure requires an inner function that accesses variables from the outer function and is returned so it can be used later.

2. Step 2: Check options for correct closure

   function outer() { let x = 5; return function inner() { return x; } } returns an inner function that uses outer variable x, forming a closure. Others either don't return the function or don't access outer variables correctly.

3. Final Answer:

   function outer() { let x = 5; return function inner() { return x; } } -> Option C

4. Quick Check:

   Return inner function accessing outer variable [OK]

Hint: Closure needs returned inner function accessing outer variable [OK]

Common Mistakes:

• Not returning the inner function
• Returning only the variable, not a function
• Defining inner function but not using outer variables

3. What will be the output of the following code?

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

medium

A. 1 and 2

B. 0 and 1

C. undefined and undefined

D. 1 and 1

Solution

1. Step 1: Understand closure behavior in makeCounter

   The inner function increments count and returns it. The variable count is remembered by the closure.

2. Step 2: Trace the calls to counter()

   First call: count = 0 + 1 = 1, returns 1. Second call: count = 1 + 1 = 2, returns 2.

3. Final Answer:

   1 and 2 -> Option A

4. Quick Check:

   Closure keeps count incrementing: 1, 2 [OK]

Hint: Closure keeps variable state between calls [OK]

Common Mistakes:

• Thinking count resets each call
• Expecting output 1 and 1
• Confusing closure with global variable

4. Find the error in this closure example:

function createFuncs() {
  let funcs = [];
  for (var i = 0; i < 3; i++) {
    funcs.push(function() { return i; });
  }
  return funcs;
}
const functions = createFuncs();
console.log(functions[0]());
console.log(functions[1]());

medium

A. All functions return 3 instead of 0, 1, 2

B. Syntax error due to missing semicolons

C. Functions return undefined

D. Functions throw a ReferenceError

Solution

1. Step 1: Identify loop variable scope

   The loop uses var i, which is function-scoped, so all inner functions share the same i.

2. Step 2: Understand closure captures final i value

   After loop ends, i is 3. All functions return 3, not 0, 1, 2 as expected.

3. Final Answer:

   All functions return 3 instead of 0, 1, 2 -> Option A

4. Quick Check:

   var in loop causes shared i = 3 [OK]

Hint: var in loop shares variable; use let for block scope [OK]

Common Mistakes:

• Assuming each function captures separate i
• Thinking semicolons cause error
• Expecting ReferenceError or undefined

5. How can you fix the following code so each function remembers its own value of i?

function createFuncs() {
  let funcs = [];
  for (var i = 0; i < 3; i++) {
    funcs.push(function() { return i; });
  }
  return funcs;
}

hard

A. Use var but call the function immediately

B. Change var to let in the for loop declaration

C. Return i directly instead of a function

D. Declare i as a global variable

Solution

1. Step 1: Understand block scope with let

   Using let in the for loop creates a new binding of i for each iteration, so closures capture different i values.

2. Step 2: Compare with var behavior

   var is function-scoped, so all closures share the same i. Changing to let fixes this by giving each iteration its own i.

3. Final Answer:

   Change var to let in the for loop declaration -> Option B

4. Quick Check:

   let in loop creates separate i per iteration [OK]

Hint: Use let in loops to create separate closure variables [OK]

Common Mistakes:

• Trying to fix by making i global
• Returning i instead of function
• Using var with immediate call but misunderstanding closures