But what is closure? and why this concept matters for modern development with React.js for example?
For definition in MDN an closure are:
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! 🚀
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?
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:
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:
Look this gif, we see
matFunction being declared and all the context and scopes chains with it,
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,
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!