📝 JavaScript Closures Tutorial

1. 🚪 What is a Closure?

A closure is a fundamental and often-misunderstood concept in JavaScript. In simple terms, a closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).

Simply put: A function remembers and can access variables from the scope it was declared in, even when that function is executed outside that scope.

• Lexical Environment (Scope): This is the local memory where variables are defined, plus the memory of its parent scope. “Lexical” means it’s determined at the time of writing/compiling the code, not at runtime.

2. 🔎 How Do Closures Work? (The Mechanics)

Closures are created every time a function is created. To understand them, consider a function that returns another function.

Example 1: The Basic Mechanism

function outerFunction(outerVariable) {
  // outerVariable is part of the outerFunction's lexical environment
  return function innerFunction(innerVariable) {
    // innerFunction uses variables from its own scope (innerVariable)
    // AND from its parent's scope (outerVariable)
    console.log('Outer Variable:', outerVariable);
    console.log('Inner Variable:', innerVariable);
  };
}

// 1. When `newFunction` is created, it maintains a reference to 
//    the lexical environment of `outerFunction` where 'hello' was defined.
const newFunction = outerFunction('hello'); 
outerFunction = null; // Even if we set the reference to null, it still works!

// 2. When `newFunction` is executed here, *outside* `outerFunction`, 
//    it still "closes over" and accesses the 'hello' variable.
newFunction('world'); 

// Output:
// Outer Variable: hello
// Inner Variable: world

Key Takeaway

When the outerFunction finishes executing, its scope (the area where outerVariable lives) should normally be destroyed.

However, because innerFunction (the closure) still holds a reference to that scope, the JavaScript engine keeps that specific state alive in memory.

3. 🛠️ Practical Use Cases for Closures

Closures are not just a theoretical concept—they are used everywhere in modern JavaScript to solve common problems.

A. Data Privacy / Encapsulation (Module Pattern)

The most common use is to hide variables from the global scope, protecting them from accidental modification, similar to how private variables work in other object-oriented languages.

function createCounter() {
  let count = 0; // This variable is private!

  return {
    increment: function() {
      count++;
      return count;
    },
    decrement: function() {
      count--;
      return count;
    },
    getCount: function() {
      return count;
    }
  };
}

const counter = createCounter();

console.log(counter.increment()); // 1
console.log(counter.increment()); // 2

// You cannot directly access `count` from here:
// console.log(counter.count); // undefined or error

console.log(counter.getCount()); // 2

In this example, the count variable is only accessible through the three returned public methods (increment, decrement, getCount), which are the closures.

B. Function Currying / Partial Application

Closures allow you to create specialized functions from a more general function by pre-setting some arguments.

function multiply(a) {
  return function(b) {
    return a * b; // Closes over 'a'
  };
}

const double = multiply(2); // 'a' is set to 2
const triple = multiply(3); // 'a' is set to 3

console.log(double(5));  // Output: 10 (2 * 5)
console.log(triple(5)); // Output: 15 (3 * 5)

C. Asynchronous Operations (e.g., Event Handlers)

Closures are essential for callbacks, especially in loops, to ensure that the function accesses the correct value of the loop variable at the time the function is executed, not when it was declared.

4. ⚠️ The Classic Closure Pitfall: Loops

Understanding this pitfall is crucial for mastering closures.

The Problem (Using var)

When you use var inside a loop to declare the variable that the closure references, all closures created inside the loop will reference the same single variable instance.

for (var i = 1; i <= 3; i++) {
  setTimeout(function() {
    console.log(i); // This closure closes over the SAME 'i'
  }, i * 100);
}

// Wait 100ms, 200ms, 300ms...
// Output (The value of 'i' *after* the loop is done):
// 4
// 4
// 4

The Solution (Using let or an IIFE)

Since ES6, the easiest fix is using let, as let is block-scoped and creates a new instance of the variable for each loop iteration.

for (let j = 1; j <= 3; j++) {
  setTimeout(function() {
    console.log(j); // This closure closes over the new 'j' for this iteration
  }, j * 100);
}

// Output (The correct value for each iteration):
// 1
// 2
// 3

📚 Conclusion

Closures are a powerful feature that makes advanced patterns like function factories and data encapsulation possible in JavaScript. By understanding that a function carries a backpack of its surrounding variables with it, you unlock a deeper understanding of how JavaScript manages scope and memory.

Useful links below:

Let me & my team build you a money making website/blog for your business https://bit.ly/tnrwebsite_service

Get Bluehost hosting for as little as $1.99/month (save 75%)…https://bit.ly/3C1fZd2

Best email marketing automation solution on the market! http://www.aweber.com/?373860

Build high converting sales funnels with a few simple clicks of your mouse! https://bit.ly/484YV29

Join my Patreon for one-on-one coaching and help with your coding…https://www.patreon.com/c/TyronneRatcliff

Buy me a coffee https://buymeacoffee.com/tyronneratcliff