What are Closures?<\/h2>\n\n\n\n
Closures<\/strong> <\/a>are one of the very basic building blocks in JavaScript. Undoubtedly, every JavaScript developer must have come across closures! And would have used Closures knowingly or unknowingly. The callbacks, higher-order, and event handler functions can access variables from the outer scope, thanks to closures. To understand closures<\/em>, one first needs to understand Lexical Environment (or Lexical Scoping<\/strong>). <\/p>\n\n\n\n Before diving into the next section, ensure you’re solid on full-stack development essentials like front-end frameworks, back-end technologies, and database management. If you are looking for a detailed Full Stack Development career program, you can join HCL GUVI\u2019s Full Stack Development Career Program<\/strong><\/a> with placement assistance. You will be able to master the MERN stack<\/a><\/em> (MongoDB, Express.js, React, Node.js) and build real-life projects.<\/em><\/p>\n\n\n\n Additionally, if you would like to explore JavaScript through a self-paced course, try HCL GUVI\u2019s JavaScript self-paced certification course.<\/strong><\/a><\/em><\/p>\n\n\n\n A Lexical scope<\/strong> in JavaScript means that variables defined outside of a function can be accessed inside of another function that was defined after the declaration of the variable. However, variables defined inside a function will not be accessible outside that function. Every function in JavaScript maintains a link to its outer lexical environment that maps all the names (E.g. variables, parameters) within a scope, along with their values.<\/p>\n\n\n\n In the above-written code, JavaScript searches for values a and b. It begins to look locally and goes outside until it finds what it is looking for. However, if we remove the variable declaration of \u2018a\u2019 in line no. 1, JavaScript will not go inside the multiply function and will throw an Undefined Error.<\/p>\n\n\n\n This is known as a Lexical scope. We can determine the scope of a component by the location of this component within the code.<\/p>\n\n\n\n Now, coming to the main question, What are closures and how do<\/strong> they work?<\/strong><\/p>\n\n\n\n According to the definition given on MDN (Mozilla Developer Network) <\/em><\/strong>Web Docs<\/em>,<\/p>\n\n\n\n \u201cClosures<\/strong> are the combination of a function bundled together (enclosed) with references to its surrounding state (the <\/em>lexical environment<\/em><\/strong>).\u201d<\/em><\/p>\n<\/blockquote>\n\n\n\n However, this is not the simplest definition and hence, hard to understand by beginners so let\u2019s break this down in simpler words:<\/p>\n\n\n\n A closures function gives access to an outer function\u2019s scope from an inner function.<\/strong> It is the combination of a function and the surrounding state (lexical environment) within which that specific function was declared. Now, the lexical environment consists of all the local variables that were inside scope at the time the closures were made. We can create a closures function by defining a function inside another one. And then exposing it by returning or passing it to another function.<\/p>\n\n\n\n The function declared inside will have access to all the variables in the function from the outer scope, even after the outer function is done executing.<\/p>\n\n\n\n In the example of the closures above, we have defined a function multiply(a)<\/em> that returns an anonymous function<\/em>. The function it returns takes a single argument b<\/em> and returns the multiplication of a<\/em> and b<\/em>. Let’s consider that multiply is a function factory that makes functions that can multiply a certain value to the argument passed. In the above example, the function factory creates two new functions – one that multiplies 10 to its argument, and one that multiplies 20.<\/p>\n\n\n\n When the code is given in line no. 7 and line no. 8 get executed multiple functions are called and stored in their respective variables. As you might be expecting after the execution, arguments passed would no longer be accessible but this is not the case. Variables multiplyBy10 and multiplyBy20 hold a reference to the anonymous function which was returned when function multiply was called with arguments 10 and 20, respectively. The instance of the returned anonymous function maintains a reference to its lexical environment, within which the passed arguments exist.<\/p>\n\n\n\n multiplyBy10<\/em> and multiplyBy20<\/em> are both closures.<\/strong> They have the same function definition but store different lexical environments and variable values. In multiplyBy10 <\/em>the lexical environment of a is 10, while in the lexical environment for multiplyBy20<\/em>, a is 20.<\/p>\n\n\n\n Let us run the above code in the console of a browser with the console.dir( ) <\/em>method <\/em>and see what information we get:<\/p>\n\n\n\n Now, here we can see that the console.dir( ) <\/em>method is7 used to get information about the variables that hold the reference of the function, we can see that both are Closures with different lexical environments, i.e., 10 and 20. <\/p>\n\n\n\n Let\u2019s look into another example to get a better understanding of closures in JavaScript:<\/p>\n\n\n\n In the above example, the outer function Counter<\/em> returns the reference of the inner function increase counter ()<\/em>. Here, the function increase counter<\/i> increases the outer variable counter to 1. The Counter( )<\/em> function updates its closures every time it is called. So calling the inner function multiple times will increase the counter by one every time. So, we can say that closures are valid in multiple levels of inner functions as well.<\/p>\n\n\n\n We generally use closures as access modifiers to give objects’ data a kind of private state. Data privacy is an essential property that helps us to program an interface, not an implementation. Any exposed method defined within the scope of the closure is privileged (accessed by only certain entities).<\/p>\n\n\n\n Let’s suppose there is a function that multiplies different values together. One way of doing that is with the help of a global variable because they are available throughout the code. But, there is a drawback! Yes, a variable that is globally accessible can also be modified from anywhere in the code. We can achieve this using closures. Closures help in maintaining as well as capturing the state between different function calls without using a global variable.<\/p>\n\n\n\n Currying, which is an important function of functional programming, is also possible due to closures. It occurs when a function returns another function until we completely supply the arguments.<\/p>\n\n\n\n Last but not least, creating an iterator. It is fairly easy to create iterators. This is because using closures we can well-preserve the data from the outer scope. Every call creates a new iterator (using closures) with a fixed starting index. Then, at every successive call of the iterator, the next value is returned. However, we should be cautious while using it with jQuery (or other JavaScript events).<\/p>\n\n\n\n Apart from the above-mentioned, you can think of several other ways to use closures according to your needs. You just need to have a good knowledge of scopes and lexical scopes to get the best out of closures.<\/p>\n\n\n\n Kickstart your Full Stack Development journey by enrolling in HCL GUVI\u2019s Full Stack Development Career Program<\/strong><\/a> with placement assistance where you will master the MERN stack (MongoDB, Express.js, React, Node.js) and build interesting real-life projects. This program is crafted by our team of experts to help you upskill and assist you in placements. Alternatively, if you want to explore JavaScript through a self-paced course, try HCL GUVI\u2019s JavaScript self-paced certification course.<\/strong><\/a><\/em><\/p>\n\n\n\n The closures are a very useful concept. Beginner JavaScript Programmers often find the concept of closures too overwhelming and skip it altogether. The scope rules, lexical scoping, and nested scopes are the accessibility of variables. The lexical scope allows a function scope to statically access the variables from the outside of the scopes. There can be a function or a block scope. Most of the time people are already using them without actually realizing it. <\/p>\n\n\n\n Closures matter in a code because they allow us to retain the values even after execution, which is a powerful and unique feature in JavaScript that only functions can have. Sometimes, we need to hold onto some values and likely keep them separate from others. So what do you use in that case? simple, A function. Why, though? To keep track of the data over time, with a closure.<\/p>\n\n\n\n Ans<\/strong>. The options are – Correct Answer: <\/strong>(d) All of the above<\/p>\n\n<\/div>\n<\/div>\n Ans<\/strong>. The options are – Correct Answer: (c) <\/strong>Lexical scoping<\/p>\n\n<\/div>\n<\/div>\n Ans<\/strong>. Correct Answer: (a) <\/strong>to implement the lexical scoping, the internal state of JavaScript must include a reference to the current scope chain apart from the code of the function.<\/p>\n\n<\/div>\n<\/div>\n Ans<\/strong>. Correct Answer: (d)<\/strong> JavaScript is an object-based language. It is not a completely object-oriented language because it does not follow three basic properties of OOPs such as polymorphism, Encapsulation, and Inheritance.<\/p>\n\n<\/div>\n<\/div>\n Ans<\/strong>. 100 Correct Answer: (c) 50<\/strong>50 is not greater than 100, therefore if the condition fails then else condition will execute. Hence, 50 will be our output.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n So, that was all about Closures in JavaScript. Go ahead and practice umpteen questions and coding challenges around the topic in our specially curated Practice platform CODEKATA<\/strong>. <\/a><\/p>\n\n\n\n Wish to learn every bit of JavaScript? Have the most simplified glance of all the concepts in JavaScript in HCL GUVI Classes. You can join us with a click. <\/p>\n\n\n\nWhat is Lexical Scope?<\/h2>\n\n\n\n
![\"\"](\"https:\/\/lh6.googleusercontent.com\/dt_4n-be2GOOrc27co99cxMSVZybzyEXimJVEoNnM5fOpLm5uNGuDg_wiz43iq4zdDvDZn6OlicsoEpY0_NMRh7T2zYQc1JGm9uD7yGXJ7hbqP9wCWedjMTjvUJsASFv-j7sflI=s0\" "\\"\\"")
Closures in JavaScript <\/h2>\n\n\n\n
\n
![\"\"](\"https:\/\/lh4.googleusercontent.com\/2T_eSbCBRks8a0qts-IgfFDBg-qPwr-E2-xxvrBJZy8E1557gfvSRwH-9CdiJOAE1pIJpKsr6NS7nVS4gHeMJNSGv6k2I3hyULBgeo1TcpfVWn4wqkrvGsKEYXp1jyBmSxBkAcI=s0\" "\\"\\"")
Closures in JavaScript Simplified For You<\/h3>\n\n\n\n
Running the Code<\/strong><\/h3>\n\n\n\n
![\"\"](\"https:\/\/lh6.googleusercontent.com\/JwhSmSbX9JRe4FbZCvEBdRmV3lx8O6kEo_m600NZ0Ji2Dz0XrStTypbE_u53izpUaBtQCEGFFsS8WQlCBXmDhxmZnC4Sa1m85hjTojCKgBrCiW0Lda93_PEb3D_dsWa34OV2trM=s0\" "\\"\\"")
![\"\"](\"https:\/\/lh3.googleusercontent.com\/jaBKJ3gW8cF_kRMlhIuKmaCVNHnysun0ERwc1U5moZre0WlywH9x1ozjfdOkZEhGTbADoeCx1gxx9Xhhf-7ueIT9D1MstMC_g0SsRIueZ0QxCf1BtoBfUR2nzGC9HHQbUttr_kg=s0\" "\\"\\"")
When to Use Closures in JavaScript?<\/h2>\n\n\n\n
1. Emulating Private Methods<\/h3>\n\n\n\n
2. Maintaining States Between Function Calls<\/h3>\n\n\n\n
3. Functional Programming<\/h3>\n\n\n\n
4. Create Iterators<\/h3>\n\n\n\n
Conclusion<\/strong><\/h2>\n\n\n\n
FAQs on Closures of JavaScript<\/h2>\n\n\n
Q1. Closures can be used for performing which of the following operations?<\/h3>\n
Maintaining states between function calls<\/strong>
Emulating private methods<\/strong>
Creating iterators<\/strong>
All of the above<\/strong><\/p>\nQ2. JavaScript uses which type of scoping?<\/h3>\n
Segmental<\/strong>
Sequential
Lexical
Literal<\/strong><\/p>\nQ3. Which of the following is mandatory to implement lexical scoping?<\/h3>\n
Reference the current scope chain<\/strong>
Dereference the current scope chain<\/strong>
Return the value<\/strong>
None of the above<\/strong><\/p>\nQ4. JavaScript is a\/an ______ language?<\/h3>\n
High-level<\/strong>
Assembly
Object-oriented
Object-based<\/strong><\/p>\nQ5. What will be the output of the following JavaScript code?<\/h3>\n
var\u00a0temp=50;\u00a0\u00a0
if (temp><\/strong>100)\u00a0\u00a0
{\u00a0\u00a0
document.write(100);\u00a0\u00a0
}\u00a0\u00a0
else\u00a0\u00a0
{\u00a0\u00a0
document.write(temp);\u00a0\u00a0
}<\/p>\n
0
50
Undefined<\/strong><\/p>\nMaster Tech Courses with 100% Placement Support in ZEN Class From HCL GUVI!<\/a><\/pre>\n\n\n\n