JavaScript is an easy-to-grasp cool language with many quirks that justify the reason why some authors wrote books on the good parts of the language. In all these, the coolness of the language is that you can quickly become productive with it without understanding the intricacies of the language or even giving a f*** at the quirks (probably until it bites you).
However, in this article, I intend to help fellow JavaScript developers in understanding the concept of scope and closures. Like I read in the: You Don't Know JavaScript series, a proper understanding of these two concepts would improve your grasp of the language and so for that reason, I would try to give my 2 cents in order to show off my understanding of these concepts and most importantly, help people like me who are seeking for true understanding of the language.
First, we would start with the concept of scope. Scope to me can be viewed like an organisation with different levels of hierarchy. Imagine an organisation with an organisation-wide document access system. At the different levels, there are certain levels of access to documents and managers can view documents created or worked on by their subordinates but the subordinates cannot view the documents created by their managers. Coming back to JavaScript, functions inside other functions have access to the variables created by their parent functions in the outer scope but the parent functions don't have access to variables created in the inner functions. Let's look at an example:
var outerFunction = function(x,y){
var x = x;
var y = y;
var adder = function (){
var z = x + y;
console.log(z);
}
adder();
return z;
}
outerFunction(3,2) // we see 5 in the console and Uncaught ReferenceError: z is
// not defined with the stack trace
As we can see, the line workers in an organization don't have access to top-level information being discussed at the higher levels unless they are explicitly told of it and in our case, that would be through an explicit return statement from the adder function and corresponding assignment of it to a variable z. So if we try to replicate a situation where line workers are given a glimpse of top-level management decisions, the code would look like:
var outerFunction = function(x,y){
var x = x;
var y = y;
var adder = function (){
var z = x + y;
console.log(z);
return z;
}
var z = adder();
return z;
}
outerFunction(3,2) // we see 5 twice in the console twice from the log and
// return statements respectively.
Now, let's talk about the concept of closures. Closures are cool in the sense that it can be related to the fact that we still have access to information even after it has been removed from the public space or the job of the original information generator is done. Let's go back to our organisational structure analogy. When the line workers generate data from the field, clean it up and probably make them presentable and pass it down to their managers, the job of the line workers may be done but the manager still has access to the document created and can interpret it the way he wants to. Going back to JavaScript, closures provide an avenue for nested functions to still have access to data generated from their parent function even after the parent function has completed its call stack. Although this works only if the nested function is returned. Let's take a look at some code:
var lineFunction = function(x,y){
var x = x;
var y = y;
var adder = function (){
var z = x + y;
return z;
}
return adder;
}
var dataHandover = lineFunction(3,2) // this instantiates the line function
dataHandover() // this returns 5 on the console. Notice it still had access to
// the x and y arguments even after the lineFunction is called
The beauty of all these for both scopes and closures is that they can be nested to any level that we deem fit although there is need for control so as to retain understanding. Remember that code is mostly read than it is written.
Nevertheless, some people would ask: what are the applications of these concepts? I can get by without them. Scopes are useful when we want to implement sub-routines in main functions that would perform some trivial task whereas closures are good for implementing a module pattern for our code. Closures help in implementing the concept of private and public functions.
I hope to see more scoped closures from you all. Thanks for reading.
Top comments (2)
Thank you! I like the hierarchical organization illustration. I can finally get some closure 😂
Thanks for reading. I am glad you grabbed the idea.