Closures in Javascript | Scope Chain and Closures Within a Loop in JavaScript

So first we will have an introduction to closures and then we will see the different types of closures and what do they actually do so we will talk about practical closures then we will see scope chain and finally we will see how closures are used within a loop if you are looking for an online training certification in web development and JavaScript a closure is actually a combination of a function bundled together with references to its surrounding State that is the lexical environment in other words a closure provides you access from an inner function to an outer functions scope now most of the developers use closures in JavaScript consciously or unconsciously it provides better control over the code when using them also it is the most frequently asked question during any JavaScript interview now let’s take an example and see how closure actually works in JavaScript so here I am creating a function as f oo and inside this I am declaring a variable X with the value 10 now I’m calling another function which is the inner function so here we have the inner function and this will return the value X now the next thing to be returned is the function inner so we have written inert here now let me take another variable as get function in ER so I’m taking this particular variable now this particular variable will actually call the function f oh oh now in the form of a variable we will get the function f or oh here now let’s print the values that we want to see so we have console dot log and we want to get the value for get function inner now you can print this as many times you want it will basically return your function fos value the number of times you are printing it.

so now you can print it as many number of times as you want to it will basically take the value from the fo function and return the value and print it the number of times you give the console dot log so let me copy this and let’s print it once again now let me save this one so this is the JavaScript file we have the separate HTML file here where I have linked my example dot Jas which is my JavaScript file here so basically when I run this HTML code it goes to this particular web page where I have welcome to add Eureka as the h1 tag so this is what I get to see but what happens when I go inside the console of this page for that we have to go inside console and when we go inside console you can see that the output that we have got here is 10 printed twice now what happened here is that you can access the variable X which is defined in function fo through the function inner as the later preserves the scope chain of enclosing function at the time of execution of the enclosing function thus the inner function knows the value of X through its scope chain so this is exactly how you can use closures in JavaScript so as I have written to console dot log statement so I have got the value is printed twice here now let’s move on to the next topic which is practical closures now closures allow you to associate the lexical environment with the function that operates on that particular data now this is of these parallels to object-oriented programming where objects allow us to associate the object’s properties with one or more methods now consequently you can use a closure anywhere that you might normally use an object with only a single method.

so now let’s take another example for our practical closures here so here I will take another function and name it as make sizer and let me pass a parameter to be size so the parameter inside this function is size now I will just return this particular function so I have return function and here I have document dot body dot style and the font size so I am taking this size in pixels so I’ll just write size and then I will attach this particular string here which is px which represents pixel now here I will declare the variable of these sides so I have my first variable as size 12 equals 2 and I will take the function here which is mink sizer and I will pass the value as a parameter inside this because here I have taken the function make sizer inside this have passed the parameter to be size so I’m taking this variable named as size 12 calling the function and inside the function and passing the parameter which is basically the value of these sides so let’s take another variable as size 14 here I have make sizer again and I am passing the value to be 14 now you can pass as many variables or as many values as you want to so now this example is generally attached as a callback now a single function which is executed in response to the event so this is actually what callback looks like so we have taken the function here we are not directly calling the make sizer we are returning the function value and inside this particular function value we are defining or we are printing out the size value along with px so this is about the practical closures now let’s move on to the scope chain now closures and JavaScript have three scopes now those three scopes are the local scope then we have the outer functions scope and finally the global scope now a common mistake is not realizing that in the case where the outer function is itself a nested function access to the outer functions scope includes the enclosing scope of the outer function effectively creating a chain of function scopes now let’s take another example and understand the scopes here so let’s take a variable X and pass the value to be 10 then.

we have a function here as some now inside the sum function and passing a parameter as a then we have a return function with the parameter B and again another return function with the parameter C now this is actually our global scope here and after this point we will have our outer functions scope so let me just mention this here so we have our outer functions scope and in the outer function scope we will take another return function which is deep finally we will have our local school so here we have another return function that will take the value as ABCD all the variables that I have declared so in the local scope we are returning the values of a b c d and x as well now let’s print out the value here so for that we have console dot log and then some 1 2 3 & 4 so what i’m doing here is passing the value for my sum function here so inside some i have the value as a and inside this i’ve passed the values as 1 2 3 & 4 so now let me save this one and then when we run the HTML file here so inside the console you can see that the value has been printed as 20 now how do we get this value is 20 so I have given the values as 1 2 3 4 inside these sum function which is actually this particular function so I have the parameter as a so basically the value of parameter a will become 1 plus 2 Plus 3 plus 4 which is equal to 10 so while I’m returning the values here I have the value of a as 10 and also declare the value of x as 10 in the global scope itself so I have the value of my variable X here as 10 but there are no values pacified for the functions or the variables B C and D these are just return functions here which does not have any value specified.

so we are considering this to be 0 so a is 10 and then we have three zeros plus X which is also equals to 10 so 10 plus 10 is equal to 20 so we get the value to be 20 here now here we have used the anonymous function we can also write this program without the anonymous functions so these were our anonymous functions here because we didn’t pass any value or anything so now let’s just take this as sum two then we have some three and here we have some four now before printing out all we need to do is pass the values to all these variables so here we’ll take another variable so what we are taking is the variable s and inside the variable as we are calling the function sum and we are passing the parameter to be one now what happens is I’ve called this particular function and so I have specified the value to be 1 so basically the value of a becomes 1 now now in the similar way what I can do is pass another variable as s1 and then take the value to be s of 2 now what happens here is that it will pass this particular value here this is not the sum function this is actually our variable s here in the similar way we can take another variable as s2 and then go to the previous variable which is s1 and assign the value as 3 and again take another variable as s3 and pass the value to s2 and the parameter value will be 4 now all we need to do is just console s3.

we will get the result here so what we will do is console dot log and we are just printing on the value of s3 now what will be the output of s3 so basically the s3 is printing out the value of s2 and then adding 4 to it so it is like a chain here which is basically a nested chain here the first step is taking the value 1 and then we are adding the value 2 and then 3 and then 4 so basically we are taking 1 2 3 & 4 and we are summing it up here so now let me save this and when we go back we get the same answer here because all we have done here is remove the anonymous functions and used the nested chain instead so here you can see this is in series of nested functions all of which have access to the outer scope of a function so you can say that closures have access to all outer function scopes within which they were declared so this was all about the different scopes and closure now moving on to the next topic we have closure within a loop now talking about loops you can use closures in JavaScript to store any anonymous function at every index of an array.

so let’s take an example and see how closures work within a loop so first we will take a function outer so the first one is function outer and inside this I’ll click the array so I’m declaring this array here but there’s no specific value inside this array and then I’m taking a variable I and I’m passing my for loop here so here I have for I equals to 0 and I less than 3 then I plus plus others its incrementing the value here now after this point what I’ll do is I’ll store the anonymous function here so this is the part where I’m storing the anonymous function so I have my array I am taking the variable as I so here I’ll take the function and return the value of I so now this was the part where we are storing the anonymous function but after that we have to return the array now so here we will return the array for that we have return array and then we will take another variable as get array and it will actually take the value of our outer function so I’m passing this outer function here and now finally I will take the console dot log and take my get array which is passed as a variable and then pass the values for my array here so in the similar way you can pass as many values as you want to so I’ll just copy this and print the second value to be one and then again I’ll print another value to be two so my I value needs to be less than three sure now.

let’s save this now when we go to our console and run this again you can see that the value printed here is three and we have printed it three times so what happens here is in three of these console dot log what we have done is we have taken the variable gate array but we have passed the value of the outer function here now what happens inside the outer function is we take the array so it provides us the value of our array so here I have 0 1 2 so the total length of my array is 3 so it’s just passing me the value of my array or the total length of my array here so this was all about closures in JavaScript and with this we have come to the end of our session today I hope you have understood how closures actually work in JavaScript and what else can be done and what are the different types and how you can use it inside a loop as well now this is basically used to get a better control of the code.

LEAVE A REPLY

Please enter your comment!
Please enter your name here