The Magic of Closures in JavaScript for Beginners
Tags: closure, beginners, programming, javascript
Published: 2023-08-12 13:52:44

Closures are a very important part of JavaScript that every developer should know well. But, this topic often becomes a real challenge for beginners and can be difficult to understand. In this article, I want to explain closures in JavaScript in a very simple way.

To understand closures, you need to know three main concepts:

 🔹 Scope

 🔹 Lexical environment

 🔹 The closure itself


## ✔️ Scope

**_Scope_** is a part of code where you can use a variable, function, or object. In other words, it's the part of code where this item is "seen". 

Most of the time (let's pretend the `var` keyword doesn't exist), the scope is the code block inside curly brackets - `{...}`. 

This isn't exactly right, but to keep it simple, we can say every function, and also code blocks like `if`, `for`, `while`, etc. (when using `let` or `const` variables), makes a new local scope.

_In JavaScript, there are 2 main scopes:_

1. **Global Scope** - variables declared outside of functions or code blocks can be used anywhere in the code. They are global.

2. **Local Scope** - as mentioned, variables inside a function (_Function Scope_) or code block (_Block Scope_) can only be used inside that block.

Let's look at an example.

![example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8uyifjkhp597m21t9t5.png)

As we can see, the `playerHealth` variable is in the global scope, so we can use it both globally and inside a function. But the `damageFromMonster` variable was declared inside a function, which means it's within a local scope. That's why, when we try to access it outside the function, we get an error.

This example also shows that different scopes can interact with each other. Furthermore, local scopes have access to variables from the outer scope. And this leads us to the concept of "lexical environment".


## ✔️ Lexical environment

The _**Lexical environment**_ is a data structure that stores information about variables, functions, and other objects in the current execution context. It's an invisible object that exists for every block of code or function in JavaScript. It only exists in the computer's memory during code execution, so it can't be physically seen.

_This object consists of two parts:_

- an object with variables in the current scope,

- a reference to the parent lexical environment.

Let's go back to the previous example. We have 2 lexical environments.

🌍 _Global_, which doesn't have a reference to a parent lexical environment because one doesn't exist.

![example-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2f2epbc99rnn7zuuux8j.png)

🔐 _Local_, which refers to the global lexical environment.

![example-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ss3vi6427ugyuwf00dm.png)

❗️I want to emphasize that the examples above are not real code, but just an attempt to visually imagine how the lexical environment object might look.

It's also important to note that the local lexical environment for the `monsterAttack` function is created not when we declare the function, but when we call it (`monsterAttack()`). This is a crucial point for understanding closures, which we will discuss next.

## ✔️ Closure

**_Closures_** in JavaScript - it is a feature where a function "remembers" its lexical environment in which it was created. This means that a function can access external variables even after the outer code has finished its execution.

In other words, when calling a function, its lexical environment is established, storing the current values of variables at the time of the call, as well as referencing its outer environment. This allows the function to "see" the variables that were accessible to it when it was declared.

Indeed, this concept might seem a bit confusing at first. However, in practice, everything becomes much clearer. 

Let's look at an example.

Imagine we're inside a video game. In game's editor, we create a character. Let's choose a wizard to whom we assign a name (`name`). This wizard will immediately have a basic spell (`castSpell`), as well as 100 mana (`mana`) for its use. The creation of such a character can be represented by the following function.

![example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofo4b416yjj451y3fmbn.png)

When we click the "Create" button, a character is created, and it might look something like this:

![example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4by3kyoajg53kkmx3sv.png)

At this point, a lexical environment for the `createWizard` function will be created.

![example-5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kmht05g7y0fatj1pjga.png)

When this function completes execution, its lexical environment disappears, but some parts (such as the `mana` and `name` variables) are "remembered" due to the **closure** of the `castSpell` function.

After this, we execute our first attack using our spell.

![example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5fjeuacddviidy0x66v.png)

At this point, another lexical environment will be created, now for the `castSpell` function (which is stored in the `lightWizard` variable). This environment will exist within the lexical environment created with the `lightWizard` character, and therefore it will reference it and its variables (`name` and `mana`).

![example-7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfug37czw7m46t6xyeta.png)

With the next attack, the mana will be reduced. This is because a new lexical environment for `lightWizard` is created during the new spell cast (`castSpell`). This environment will include the current mana value, which is 80. After the subsequent attack, only 70 will remain, and so on.

![example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8j372a7ddodjv7uuxyv.png)

![example-9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4mq2pagfgfkecuquczpm.png)


Now, a new player appears in the game. He also uses the editor and creates a new wizard.

![example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6yhnsqb2ea5ecek0fro.png)

For this character, a new lexical environment is created, which differs from the previous one only in name.

![example-11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulvc2s38dug2b46ieb2q.png)

Then, a battle between the two wizards begins. Voldemort attacks Harry with a full 100 mana.

![example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w0t108l3lumjw8jjdg1r.png)

Harry strikes back, but he has less power since he has already used some of his mana.

![example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5qdwy1mq1hddiahn87w.png)

As you've probably realized by now, a new lexical environment is created with each attack, storing the current data, including the remaining `mana`.

Even though both wizards were created using the same `createWizard` function, their execution contexts are different. Each one has its own separate variables. So, when creating a new wizard with `createWizard()`, you always start with 100 mana.

This example is quite basic, but it illustrates the core concept. I chose this approach to avoid complex explanations and to focus on the main idea of this significant and interesting topic. 

I hope this article sparks your interest and encourages you to learn more about closures.