What is a closure? And why this matters ? - Javascript
Tags: javascript, webdev, programming, react
Published: 2022-10-11 22:01:43

#  Closures
Maybe you already have done an interview with the following question: Describe a closure in javascript? 
But what is closure? and why this concept matters for modern development with **React.js** for example?

For definition in MDN an closure are: 

> A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

So if you are a beginner js developer maybe you don't have familiarity with those concepts like inner function, outer function, scope, and that's understandable, nowadays developers are caring less about how js works in the background and just jump into developing new things with react and stuff, I don't wanna judge, I took the same path as well, but if you are like me, and now feeling that you should need to understand better how those things works, this gonna be a good article for you! 🚀

![scope being declared](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6pj21hxi6efty7t1ptfq.gif)

#### Scope: how works and what is this?
Are you seeing this gif? Why does this work? How is it possible to `getPerson` function to access `pet` variable even if, pet variable is not inside of it? 
Fault: **scope**

When we invoked the function `getPerson`, what's happening? In memory, we set a space for each context, in this case as default for any code a **global context**(_can be window in browsers and global in Node_) and we set also the `getPerson` function context(_local function context_). Each context has its own scope, and `getPerson` function have a scope similar like that.

![variable contexts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8u1xeph0trj8xn1uiq1d.gif)

Look, we have two context and inside each one we also obtain: **variables**, **this**, and for only for locally context of an function: **args**, I don't want to talk about the last two ones but basically they are cores inside local contexts. But I ask you how `getPerson` doesn't get undefined using `pet` variable I will explain:

![declaring flux](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ure0we2l9ydtzg2rvtt.gif)

So because of hoisting, we have all the variables declarations occurring when the program starts, but their values will be associated just in runtimes, so before `getPerson` get executed we have all the global context being completed, and when `getPerson` function runs, we search for variable `pet` inside the local context, if don't find, go search for the outer context, inside the actual scope until reach the variable declaration and value, otherwise throwing an error for variables that are not found. This behavior is called scope chain, and this matters for closures.

So you understand about scope chain, how this is mixed with closure definition? Getting back to the MDN definition, let's take a look at the last part of it: 

>  In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

I should say, in my words, a closure for definition: it's just the case when a function uses an outer function scope, but this is not might right in my mind so I came up with this other definition: 

> A closure is a stack frame that is allocated when a function starts its execution, and not freed after the function returns (as if a 'stack frame' were allocated on the heap rather than the stack!). In JavaScript, you can think of a function reference variable as having both a pointer to a function as well as a hidden pointer to a closure.

Forgetting about the heap, and stack, there are other javascript concepts, you might think, a closure uses an outer variable and persist this data after the function execution, in other languages like C, after a function got executed, we free the memory an all variables memory related with that, but for javascript we can persist this variable.

![closure working](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rcnh8uzh2fikuyglnjrv.gif)

Look this gif, we see `matFunction` being declared and all the context and scopes chains with it, `add` and `decrease` functions inside `matFunction` have access by **scope** chain to the `matFunction` **context**, being able to edit and persist the value of **x** **variable**, all this is only able because we declare the **mat** **variable** in the **global** **context** as `matFunction` execution, this create a space in heap for x variable can changed and **persisted**.

And that's it, **`add`** and **`decrease`** functions are closures for x variable, and we can persist their value on memory.

NEXT: Why closure are important for react?

If you like, please share with your friends, this take work to made haha!