Closures in JavaScript

What is a Closure?

A closure is a feature in JavaScript where an inner function has access to variables from its outer (enclosing) function scope even after the outer function has returned.

Closure Can Access:

• Its own variables
• Outer function’s variables
• Global variables

Syntax Example:

function outerFunction() {
  let outerVariable = "I'm outside!";

  function innerFunction() {
    console.log(outerVariable); // Access outerVariable
  }

  return innerFunction;
}

const closureFunc = outerFunction();
closureFunc(); // Output: I'm outside!

Even though outerFunction has finished running, innerFunction remembers outerVariable. This is a closure.

Real-Life Use Case: Counter

function createCounter() {
  let count = 0;

  return function () {
    count++;
    console.log("Count:", count);
  };
}

const counter = createCounter();
counter(); // Count: 1
counter(); // Count: 2
counter(); // Count: 3

• count is a private variable.
• It's not accessible directly, but the inner function can update and access it.

Closures Provide:

• Data encapsulation
• Private variables
• Persistent state across function calls

Closure in a Loop (With let)

for (let i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log(i); // Outputs: 0, 1, 2
  }, 1000);
}

If you used var, all would log 3. But let creates a closure per iteration.

Common Interview Example

function greet(name) {
  return function(message) {
    console.log(`${message}, ${name}`);
  };
}

const sayHelloToJohn = greet("John");
sayHelloToJohn("Hello"); // Output: Hello, John

Summary