What is a closure? And why this matters ? - Javascript

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: 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.

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:

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.

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!