Closures in JavaScript
What are closures?
The closure is an inner function that has the access to the outer function’s variable. And it is a combination of function and lexical environment within which that function was declared.
The closure has three scope chains
- It has access to its own scope. For example(that variable that is declared between its curly brackets).
- It has access to its outer function ’s variables. For example(Closure parent function).
- And it has access to the global variables.
And the inner function has access not only to its outer function’s variables, but it has also access to the outer function’s parameters.
The very vital point to know about closure inner function is they cannot call to the outer function’s argument objects.
Now consider the following example of a closure in JavaScript:
Run the code and notice that the alert() statement within the displayMyName() function successfully displays the value of the name variable, which is declared in its parent function. And this is also an example of lexical scoping, which describes how a parser resolves variable names when functions are nested. That means nested functions have access to its variables declared in their outer scope.
The reason is that functions in JavaScript which is a closure. The lexical environment consists of any local variables that were in-scope at the time the closure was created in JavaScript. In this case, callFunc is a reference to the instance of the function displayMyName created when showMyName is run. The instance of displayMyName maintains a reference to its lexical environment, within which the variable name exists. For this reason, when showMyName is invoked, the variable name remains available for use and “Ajay Singh” is passed to alert.
Now consider the following example of a closure in JavaScript:
Run the code notice that the alert() statement run the showName function, where I passed the two parameters “John” and “Doe” and I will show you output as “Your name is John Doe”. Because as I already tell you the inner function has access not only to its outer function’s variables, but it has also access to the outer function’s parameters. As you see the above code.
Now this slightly more interesting example of JavaScript closure:
Run this example, we have defined a function createAdding(x), which takes a single parameter x and returns a new function. The function it returns takes a single parameter y and returns the sum of x and y.
The createAdding is a function factory — it creates functions which can add a specific value to their parameter. In the above example, we use our function factory to create two new functions — one that adds 5 to its argument, and one that adds 10.
adding5 and adding10 are both closures. They share the same function body definition but store different lexical environments.
And that’s it this is the end of this article. Clap 👏 for this article if you find it useful 😃.
Hi, My name is Ajay Singh Rajput. I am a Frontend Developer at ZestGeek.I write about JavaScript and reactjs. And sharing my worldview with everyone join my quest by following me at Twitter or Medium.
Want to learn more about JavaScript and React js? Check out my other articles:
1.Understanding Hoisting in JavaScript
2. Login with GitHub and Microsoft in reactjs
2. Login with Facebook and Google in reactjs
4. How to setup redux and react router v4 in your react app
5. Setting up a React.js project with simple steps
I hope you enjoyed this article on Closures in JavaScript.
Feel free to comment and like this article so that others can find it easily on Medium!
And thank you for reading this article if you like it then share it, with your friends and enemies. And I will be writing more about JavaScript,react.js stay connected with me.
