Javascript Closures
The concept of closures in javascript is one I find interesting so let's talk about it
It all starts with scope, but what is scope? scope can be said to be the definition of accessibility of variables in a program.
At the most basic level in javascript, there is a function scope that is local and defined as the region within a function and there is the global scope which is basically the region within the window object or the global object ( nodejs), a variable declared in a function cannot be accessed or changed directly outside the function but a variable declared in the global scope can be accessed and changed by all scripts in the program including those in functions and also if you nest a function in a function, the inner function would have access to the variables in the parent function and the window object, just as a function would have access to the window object. So you can think of it this way, every function has access to the variables in the scope above it. Another thing to keep in mind is that the local variables of a function are pretty much deleted after the function has returned or is done executing, that's basic javascript, right? 🙂
Closures
Now to the man of the day. A closure is a function having access to the scope of its parent function even after the parent function is done executing, hmmm 🤔
It’s really not that tricky, trust me you'll see, consider the function below
if you run this, you will notice that it runs without errors meaning the function printNumber has access to number (which is a variable in its parent function example) even after example has returned because at the point printNumber is called, example is done executing so number is supposed to be deleted but somehow printNumber retains number from its parent, that's exactly what closures are all about. If you add breakpoints and check chrome dev tools, you'll see under scope (right pane under sources) that there is a closure in example. Some times, when developers talk about closures, they imagine self-invoking functions like this:
this works too but it is mostly used when we just want the parent function to run once which is mostly the case with closures anyway. You might be wondering “what's the point, I can't find the usefulness of closures”
well, we’ll see about that 👉👈. Here are a few scenarios where a closure would do the job perfectly. Imagine a situation where you have a private variable that you only want to change internally, uhhmm 🤔lets say a function that registers users to an array
here, registerUser is assigned the return value of the function which in this case is self-invoking, looking at that code, you really need that closure because one, you wouldn't declare users in the global scope, because you don't want any script messing around with it, you might have some safe checking and validation happening in registerUser (the function returned by the self-invoking function) and you don't want a bypass and secondly, you wouldn't want the user array to reset every time you register a user cause that's what would happen if you don't use an inner function for the registration. It's useful now right? 😉 lets even take it a little bit further
so what exactly is going on here. userTools was defined as the return value of a self-invoking function, the return value is an object literal in this case that contains important functions for working with the user array, there are three functions (methods) in the object returned, addUser , getUserById and getUserFunctions which I played around with a little (that's what this programming thing is all about right?😳 no?😬). So a few users were added and some queries were made to the users array with the utility functions (addUser , getUserById and getUserFunctions) exposed through the closure.
Here is another example of a closure, this time used for log prefixing
saves a lot of stress in giving logs context, this is just to show how important closures are and how working with them is so much fun, you might have encountered closures without knowing, they’re used everywhere from working with web APIs to recursion and all. Closures are not always higher-order functions (functions that return functions or take functions as parameters) though, for example
So…… that's it, hope you enjoyed it 🙂
Happy coding!
