DEV Community

sams-engine
sams-engine

Posted on

Javascript Closure #1

Welcome onboard, new buddy! ...
Wait what new, why new ? and there is a reason behind that,we been already going through Javascript Object in our latter Post,now we are going to enter into something new concept in Javascript called Closure.Pretty aware that Closure is one of the important concepts in Javascript.In Beggining you may ask what is closure and where it is used in Javascript,i will give complete explanations about it from my knowledge about it.

Before Knowing what it is,as i believe you're aware of functions in Javascript.Functions are called as the First Class Citizen because of some reason like they can we used as Storing in a variable,they can be used as an expression,they can be passed as an arguments in function or else return from a funtion.Functions are same as Object.
Yeah! we got some Knowledge about why it is called like that,coming to our topic Closure.Why we came here was Closures are actually used in the Functions.

The Definition of Closure is,


> A function along with its lexical environment is collectively called a closure.

Enter fullscreen mode Exit fullscreen mode

This may makes you mad,atfirst i too got the same feel,when i start knowing about closure.Don't get worry we can easily wipe it out.

From the Definition we can see,it is saying that all functions have closure but some of them are usually noticable and usefull.

Once again, you don't need to worry about getting every bit of this definition into your mind right now. We'll address every part of the definition one-by-one and make it 100% sure that by the end of this chapter, you really know what a closure is.

Before Getting Deep into Lexical Enviroment.Let's see about what is Lexical Enviroment.

The Lexical Environment of the Function Simply refers to the environment enclosing the function definition in the source code
Enter fullscreen mode Exit fullscreen mode

In Starting Stage, even for me it took bit hard to Understand this,but i just memorised the definition and learnt it in a Practical way.

Let's understand this with an example,

In other words lexical environment of a function is simply based on the source code of the program,just where it is defined, that is called the lexical environment.

So what is meant by Source Code right?
Simple,Javascript Compiler read the Program's source code and determine the environment accessible to the given function,when compiling it.And the Lexical Environment of the Function is defined once and fixed and will not change,throughout the program that's why Javascript is Statically Scoped Language.And it is Governed by the Source Code.

Let's understood this with an example,

`var a = 'static';

function f1() {
   console.log(a);
}

function f2() {
   var a = 'dynamic';
   f1();
}

f2();`
Enter fullscreen mode Exit fullscreen mode

Here, the function f1 is defined in the global scope, likewise its lexical environment is the whole global environment. The same goes for the function f2().

Now when f2() is called in line 12, first a local variable a is created and initialized to 'dynamic' and then f1() is called. Inside f1(), the statement console.log(a) is encountered. At this point, the name a has to be resolved.

Here's how the resolution goes.

1.First the local scope of f1 is searched for the name a. Trivially, because this local environment is empty, no such name is found. Consequently, searching moves to the lexical environment of f1.
2.Searching in the lexical environment goes orderly as well. That is, first enclosing the function's first enclosing environment is searched, then the outer enclosing scope, and so on until eventually the global environment is reached, which has no further enclosing environment.
3.The enclosing lexical environment of f1 is simply the global scope, hence searching is conducted here for the name a. Since a match is found, bound to the value 'static', the name a in console.log(a) is resolved with the value 'static'.

This is how name resolution works in JavaScript, in Python, in PHP, and in all statically-scoped languages.

For now we've seen what is Lexical Environment,we'll see more about closure in upcoming posts.

Many Thanks for Your Patience,
Sam

Top comments (0)