Closures in JavaScript

Understanding This Key Concept for Writing Better Code

Photo by NEOM on Unsplash

Closures are one of the most powerful yet often misunderstood concepts in JavaScript. A solid grasp of closures can help you write cleaner, more reusable code and unlock the full potential of JavaScript.

In this article, we’ll demystify JavaScript closures by exploring what they are, why they matter, and how to use them properly. By the end, you’ll have a clear understanding of this key language feature.

What Are JavaScript Closures?

A closure is a function that remembers its outer variables and can access them. In JavaScript, closures are created whenever a function is created inside another function:

function outer() {

  var outerVar = "I'm the outer var!";

  function inner() {
    console.log(outerVar); // Access a variable from the outer scope
  }

  return inner;
}

var myFunction = outer();
myFunction(); // Logs "I'm the outer var!"

Here the inner function can access the outerVar variable from the outer scope even after outer has finished running. The inner function “remembers” the environment in which it was created.

Why Do Closures Matter?