Closures Made Easy

One of the most disturbing theoretical topics in JavaScript is the concept behind Closure. In this article, we will be resolving this "myth" to the simplest form it can come. Closure is not a function we create or a variable we declare. It in fact, is just a process - a procedure - that happens when it is created by a function. Now, how does it happen, you might ask. Don't rush but look carefully into this code first

In the above code, you can see that there's a parent function with a child function. The parent function creates a scope and in the scope, we have a declared variable accessible to all child elements. That, as you can see is the carNum variable. It in fact is set at 0. Now, if you run this whole code in your terminal or IDE, it'll return an increment in the value of carNum for each time you call the function. Isn't that confusing? Of course, it is! First, you most likely have heard that JavaScript is single-threaded and even this, to many, doesn't look like a loop for it to be incrementing a predefined variable/data. This is the power of Closure. In simple terms:

Closure is the ability of a function to have access to a/the variable(s) defined before itself.

In our function above, we called the parentFunc and saved the variable in parentCaller. This means that the returned value i.e what we ask the parentFunc to return (check the function again) will be saved in parentCaller variable and because the returned value is a function, the parentCaller variable turns into a function too. You might have to read this paragraph again but if you read and get it again, you're one step closer to getting what closure is. Each time the parentCaller is called  -  being a function now  -  it increments the carNum variable value that was declared before it and that's where the problem seems to be.

Thing is, there's something called Execution Context for each JavaScript code block. There are two blocks in our code; parentFunc and childFunc. Execution Context is "literally" where a code runs in the call stack but this information doesn't really matter. In essence, when you run a function or a code block, the execution gets popped out and hence, allows other code blocks to get executed. This is what is essentially happening. Immediately you call the parentFunc and saved it in parentCaller, it got popped off the stack of code blocks that the Execution Context wants to run and it remained the childFunc that remains to be executed but funny enough, we have saved it in a variable down the lane. It gets to run each time you then call it because it has the value that returns childFunc. Digest that😊.

Now, when you call the parentCaller it essentially goes to relate back to it's parent's properties that it used to have. It's like having a heritage to rely on and so each time you call it, it invests in those heritage - like our return function increases the variable before - and hence Closure. It might seem illogical at first but that's just how JavaScript works. In fact, if you defined a variable on the global scope and you call it carNum, the JavaScript code will look into its parent first to determine what carNum is before it looks into the global scope and as such, it'll increment the one in its parent first.

I hope this article did justice to your understanding of what closure is. If yes, drop a comment and maybe about JavaScript topics you'd love to read about. With me, trust me JavaScript is easier😊.