In this article I will explain closure – one of the important concepts in JavaScript. I will also cover the benefits of using closures.<\/p>\n\n\n\n
What is a closure?<\/strong><\/p>\n\n\n\n JavaScript is a function oriented programming language. Because of this we have lots of freedom in using functions. We can easily create a function, pass it as an argument to another function (known as callbacks<\/a>), define a function inside another function and so on. In JavaScript, the functions which are defined inside another function (i.e. the inner functions) are termed as closures<\/strong>. One important point to note here is closures have access to it’s parent functions scope even after the outer function has returned<\/strong>. <\/p>\n\n\n\n Let’s understand this with an example:<\/p>\n\n\n\n In the example above, The main objective behind using closures is data hiding<\/strong> or data privacy<\/strong>. The inner functions (closures) are not exposed to outer world and are not directly accessible from outside scope. The only way to use a closure is by exposing it to it’s parent function. Only parent function can call a closure.<\/p>\n\n\n\n Thank you for reading.<\/p>\n\n\n\nfunction init() { \n var name = 'Lokesh';\n \/\/ this is a closure \n function displayName() { \n alert(name); \n \/\/ using variable declared in the parent function \n } \n displayName(); \n} \ninit(); <\/code><\/pre>\n\n\n\ndisplayName()<\/strong><\/code> function is a closure<\/strong>. As you see, the function has access to it’s parent scope variable name<\/code><\/strong>. So, when the parent function init()<\/code><\/strong> is called, it will display an alert containing the name Lokesh. Although I have shown just one closure in the example, it is absolutely valid to have multiple and nested closures in JavaScript. For example, we can define more functions inside init()<\/code><\/strong> or inside displayName()<\/code><\/strong> too, which is already a closure. You can define as many closures you want.<\/p>\n\n\n\n