{"id":7661,"date":"2023-03-16T12:55:30","date_gmt":"2023-03-16T07:25:30","guid":{"rendered":"https:\/\/innovationm.co\/?p=7661"},"modified":"2023-03-16T12:55:30","modified_gmt":"2023-03-16T07:25:30","slug":"closure-in-javascript","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/closure-in-javascript\/","title":{"rendered":"Closure in Javascript"},"content":{"rendered":"

As per the definition of Javascript Developer, Closure is defined as the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). But what is meant by the terms \u201cenclosed\u201d, \u201csurrounding state\u201c, and lexical environment?<\/p>\n

No need to worry, we\u2019ll discuss their terms and closure in this article with an example.<\/p>\n

Before jumping to closure, let’s understand how javascript works.<\/p>\n

Everything in javascript happens inside an \u201cExecution Context”.It’s like a big box in which we have two components.<\/p>\n

1) Memory Component:-> where all functions and variables are stored in key-value pairs. \u201cMemory component\u201d is also known as \u201cvariable environment\u201d.<\/p>\n

2) Code Component:-> place where code is executed one line at a time. This is also known as \u201cthread of execution.<\/p>\n

Figure 1<\/strong><\/p>\n

\"\"<\/p>\n

Whenever a javascript file is created, all the variables and functions are stored in the memory component before running the js file only. Variables declared with type var are initialized with the value \u2018undefined\u2019 while functions are initialized with the whole function definition only. And after execution of the assigned line, the variables are reassigned with values passed in variables present in that execution context.<\/p>\n

In the case of function execution, again a new execution context is created with the name same as a function which will be having its own local memory component and code component.<\/p>\n

Figure 2<\/strong><\/p>\n

\"\"\"\"<\/p>\n

Here, figure 2 is a snapshot of when our code has executed till line 3 and has not returned a variable. (line 4)<\/p>\n

Now, let’s understand the term surrounding state\/ lexical environment in the definition of closure.<\/p>\n

Lexical environment means variable and function which is present in that scope and variable present over its parent’s environment( parent env refers to the physical place where a function is called).<\/p>\n

So, whenever a variable is used in some function that is being returned and it is not declared in that function then it looks for its parent function if that variable is present over there. This whole package refers to closure.<\/p>\n

Let\u2019s deep dive into understanding closure with an example.<\/p>\n

\"\"<\/p>\n

\u00a0Figure 3<\/strong><\/p>\n

\"\"<\/strong><\/p>\n

In figure 3, we are calling function y() using function x(). When function y() is executed a new execution context is created with a memory component as empty as it doesn\u2019t have any variable or function declared in it. So when console.log(\u201ca\u2192\u201d, a) is executed then it looks for the \u2018a\u2019 variable in its local execution context but is not found. Then it looks into its parent\u2019s execution context i.e x\u2019s execution context and there it found the variable a\u00a0 declared over there and outputs its value i.e 7.<\/p>\n

This property of function y which is binding variable a with its parent\u2019s environment i.e x is known as closure.<\/p>\n

Another property of closure is that if a function is returned, then after executing the whole function r (see figure 4), it doesn\u2019t get deleted from its memory, variable t still knows the reference of function s\u00a0 and the value bound to it from where it is present. Therefore after executing the whole function of r. It still remembers the reference of variable b and returns 7 in output (see fig 5)<\/p>\n

Figure 4<\/strong><\/p>\n

\"\"<\/p>\n

 <\/p>\n

Figure 5<\/strong><\/p>\n

\"\"<\/strong><\/p>\n

\u00a0<\/strong><\/p>\n

Use of Closures<\/strong><\/p>\n