JavaScript Closures Made Easy: Understand in 10 Minutes

#webdev #programming #javascript #beginners

Closures are one of the most powerful (and sometimes confusing) concepts in JavaScript. Once you understand them, a lot of advanced JavaScript patterns start to make sense.

Let’s break it down in a simple way.

What is a Closure?

A closure is created when a function remembers the variables from its outer (parent) scope even after that outer function has finished executing.

In simple terms:
A closure lets a function access variables from outside its scope, even later.

Basic Example

function outerFunction() {
  let message = "Hello, Bonda!";

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

  return innerFunction;
}

const myFunction = outerFunction();
myFunction(); // Output: Hello, Bonda!

What’s happening here?

outerFunction runs and creates a variable message
It returns innerFunction
Even after outerFunction finishes, innerFunction still remembers message

That memory is called a closure

Why Closures Work

Closures work because of lexical scope in JavaScript.

Functions remember where they were created
Not where they are executed

Real-World Example: Counter

function createCounter() {
  let count = 0;

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

const counter = createCounter();

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

Explanation:

count is private (can’t access it directly)
The inner function still remembers and updates it
This is commonly used for data privacy

Closures for Data Privacy

function bankAccount() {
  let balance = 1000;

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

const account = bankAccount();

console.log(account.getBalance()); // 1000
account.deposit(500);
console.log(account.getBalance()); // 1500

Here, balance is protected and can only be accessed via methods.

Common Mistake with Closures

for (var i = 1; i <= 3; i++) {
  setTimeout(function () {
    console.log(i);
  }, 1000);
}

Output:

4
4
4

Why?

var is function-scoped
All functions share the same i

Fix using `let`:

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

Output:

1
2
3

Why Closures Are Useful

Closures are used in:

Data hiding / encapsulation
Creating private variables
Function factories
Event handlers
Callbacks and async code

Key Takeaways

A closure is a function that remembers its outer variables
It allows data persistence
It helps in writing clean and modular code
It enables private variables

Final Thought

Closures might feel tricky at first, but once you get them, they unlock a lot of JavaScript power.

Top comments (1)

Jon Randy 🎖️ • Mar 27

A closure is a function that remembers its outer variables

Unfortunately, this is not correct. A closure is not a function, and ALL functions retain access to their 'outer' variables - a closure is what allows this to happen. Every function has an associated closure, which is created at the time of the function's creation.