What are Closures in JavaScript?

Hello Readers,

Keep Reading this Blog to know more about Closures ….
Lets Look at this Example:

1. function x(){
2. var a=14;
3. function y(){
4. console.log(a);
5. }
6. y();
7. }
8. x();

The above is a Example fo…


This content originally appeared on DEV Community and was authored by Naveen Kamath

Hello Readers,

  • Keep Reading this Blog to know more about Closures ....
  • Lets Look at this Example: 
1. function x(){
2.     var a=14;
3.     function y(){
4.         console.log(a);
5.     }
6.     y();
7. }
8. x();
  • The above is a Example for Closure. We already know the output of this program ie a equals 14, but lets understand theory behind this.
  • First we need to Understand what Lexical Scoping(LS) means,

Image description

  • LS means when y() gets called, it tries to find a variable inside local memory but a is not found, so it goes to its Lexical Parent and it finds variable a and thus console logs it. This is called Lexical Scoping.
  • A Function bundled together with its Lexical Environment forms Closure. Here the Function y was bundled to variables of x.
  • so in One Way, This is what Closure is !!!!

Closure Deep Dive

  • Consider the Example: 
1. function x(){
2.     var a=14;
3.     function y(){
4.         console.log(a);
5.     }
6.     return y;
7. }
8. var z=x();
9. z();
  • what is the output of the above program?
  • The answer is when z() called in line9 returns 14, But how is that possible????
  • We Know that JS is Synchronus ie after running line 8, x is Deleted ie X() Execution Context(EC) gets Deleted in Call Stack.
  • To know more about EC, Read my EC Blog
  • In the above Example, 'a' is not in Global Scope and x gets deleted after line 8, So how program console logs 14. Here Closure comes into picture.
  • When Functions are Returned from Another Function, They still maintain their Lexical Scoping.
  • When y is returned, not just function code gets returned but Closure enclosed function along with its Lexical Environment gets returned and was assigned to z. This is the use case of Closures.
  • Other Uses of Closures:
  1. Currying
  2. setTimeout
  3. memoize etc
  • Thanks for Reading my Blog folks, Have a great Day :)


This content originally appeared on DEV Community and was authored by Naveen Kamath


Print Share Comment Cite Upload Translate Updates
APA

Naveen Kamath | Sciencx (2021-12-11T14:53:22+00:00) What are Closures in JavaScript?. Retrieved from https://www.scien.cx/2021/12/11/what-are-closures-in-javascript/

MLA
" » What are Closures in JavaScript?." Naveen Kamath | Sciencx - Saturday December 11, 2021, https://www.scien.cx/2021/12/11/what-are-closures-in-javascript/
HARVARD
Naveen Kamath | Sciencx Saturday December 11, 2021 » What are Closures in JavaScript?., viewed ,<https://www.scien.cx/2021/12/11/what-are-closures-in-javascript/>
VANCOUVER
Naveen Kamath | Sciencx - » What are Closures in JavaScript?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/11/what-are-closures-in-javascript/
CHICAGO
" » What are Closures in JavaScript?." Naveen Kamath | Sciencx - Accessed . https://www.scien.cx/2021/12/11/what-are-closures-in-javascript/
IEEE
" » What are Closures in JavaScript?." Naveen Kamath | Sciencx [Online]. Available: https://www.scien.cx/2021/12/11/what-are-closures-in-javascript/. [Accessed: ]
rf:citation
» What are Closures in JavaScript? | Naveen Kamath | Sciencx | https://www.scien.cx/2021/12/11/what-are-closures-in-javascript/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts