JavaScript closures: How functions remember external variables

Have you ever wondered how a function in JavaScript can remember variables that are defined outside of it? This is where closures come in!

Closures are a powerful feature in JavaScript that allow functions to remember variables from their parent scope, even after the parent function has returned.

In this article, you'll explore how closures work in JavaScript and how they can be used in real-world scenarios.

Understanding Scope in JavaScript

Before we dive into closures, let's first talk about scope in JavaScript.

Scope refers to the visibility and accessibility of variables in different parts of a program. In JavaScript, there are two types of scope: local and global.

Local variables are defined inside a function and can only be accessed within that function. For example:

function greet() {
	const name = 'John';
	console.log(`Hello, ${name}!`);
}

greet(); // Output: "Hello, John!"
console.log(name); // ReferenceError: name is not defined

In this example, name is a local variable that can only be accessed within the greet() function.

Global variables, on the other hand, are defined outside of any function and can be accessed anywhere in the program. For example:

const age = 30;

function celebrateBirthday() {
	age++;
	console.log(`Happy ${age}th Birthday!`);
}

celebrateBirthday(); // Output: "Happy 31st Birthday!"
console.log(age); // Output: 31

In this example, age is a global variable that can be accessed inside and outside the celebrateBirthday() function.

What are Closures?

Now that we understand scope in JavaScript, let's talk about closures.

A closure is a function with access to variables from its parent scope, even after the parent function has returned. Here's an example:

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

const incrementCounter = counter();
incrementCounter(); // Output: 1
incrementCounter(); // Output: 2
incrementCounter(); // Output: 3

In this example, the counter() function returns another function that increments and logs a count variable. Even though the counter() function has returned, the inner function still has access to the count variable because of closure.

Closures also work in arrow functions:

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

const incrementCounter = counter();
incrementCounter(); // Output: 1
incrementCounter(); // Output: 2
incrementCounter(); // Output: 3

How Closures Work

To understand how closures work, let's break down the previous example:

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

const incrementCounter = counter();

• We define a counter() function that initializes a count variable to 0 and returns another function.
• We assign the returned function to a variable incrementCounter.
• When we call incrementCounter(), it increments the count variable and logs its value.

Common Use Cases for Closures

Closures are commonly used for creating private variables and functions. This is because variables and functions defined inside a closure are not accessible from outside the closure. Let's take a look at an example:

function createPerson(name) {
	let age = 30;

	function greet() {
		console.log(`Hello, my name is ${name} and I'm ${age} years old.`);
	}

	function celebrateBirthday() {
		age++;
	}

	return {
		greet,
		celebrateBirthday,
	};
}

const john = createPerson('John');
john.greet(); // Output: "Hello, my name is John and I'm 30 years old."
john.celebrateBirthday();
john.greet(); // Output: "Hello, my name is John and I'm 31 years old."
console.log(john.age); // Output: undefined

In this example, we have a createPerson() function that returns an object with two methods: greet() and celebrateBirthday().

The greet() method logs a message that includes the name and age variables. The celebrateBirthday() method increments the age variable. The age variable is defined in the parent createPerson() function and is not accessible from outside the closure.

If we try to access the age variable directly from outside the closure, we get undefined. This is because the age variable is not defined in the global scope, and is only accessible from within the closure created by createPerson().

Without closures, we would have to make the age variable a global variable in order to access it from both greet() and celebrateBirthday(). This can lead to naming conflicts and other issues, making closures a cleaner and more modular solution.

Conclusion

Closures are a powerful feature in JavaScript that allow functions to remember variables from their parent scope, even after the parent function has returned.

This allows for more flexible and modular code, and can help prevent bugs and unexpected behavior.

Understanding closures is an important step in becoming a proficient JavaScript developer.

Try what you have learned in the interactive code editor below.

function createPerson(name) {
	let age = 30;

    function greet() {
    	document.write("Hello, my name is " + name + "and I'm" + age +  "years old.");
    }

    function celebrateBirthday() {
    	age++;
    }

    return {
    	greet,
    	celebrateBirthday,
    };

}

const john = createPerson('John');
john.greet(); // Output: "Hello, my name is John and I'm 30 years old."
john.celebrateBirthday();
john.greet(); // Output: "Hello, my name is John and I'm 31 years old."
document.write(john.age); // Output: undefined

Have fun coding!