Javascript

Understanding Closure in Javascript with example

This article is all about what is closure in javascript and how to use closure in Javascript in a more appropriate way. We’ll also try to understand Closures in Javascript with the help of some examples.

Closures are one of the most important and frequently used topics in JavaScript for object data privacy, in event handlers and callback functions, and in other functional programming patterns.

Also Read: Best Javascript Interview Questions

Although, Closures might appear complex and beyond your scope but there is one thing for sure that after you read this article, closures will be much more easily understood and you will be able to use it in your everyday javascript programming. So without wasting more time, let’s dive in…

Closure in Javascript

What is closure in Javascript?

As we already said that closure is one of the main topics of javascript, both in terms of practical and educational views. Coding in JavaScript without an understanding of closures is like trying to speak English without an understanding of grammar rules.

Closure in Javascript

According to the MDNclosure is the combination of a function and the lexical environment within which that function was declared.

Let’s understand Closure in javascript with this simple example.

function init() {
var name = 'codingshala'; // name is a local variable created by init
function displayName() { // displayName() is the inner function, a closure
alert(name); // use variable declared in the parent function
}
displayName();
}
init();

In the above-written code, we can see that the function init() creates a local variable called name and a function called displayName(). The displayName() function is an inner function that is defined inside init() and is only available within the body of the init() function.

The thing which must be taken note here is that the displayName() function has no local variables of its own. However, since inner functions have access to the variables of outer functions, displayName() can access the variable name declared in the parent function, init(). And that is what closure is all about in javascript. 

A closure is the combination of a function bundled together i.e enclosed together with references to its surrounding state which is also referred to as the lexical environment. In a simpler term, a closure gives you access to an outer function’s scope from an inner function.

How closure works in Javascript

In JavaScript, closures are created every time a function is created, at function creation time. To use a closure, all you need to do is to simply create a function inside another function and return it or pass it to another function.

Closure gives you an outer function’s scope from an internal function. Scopes are contexts of variables. Every object has a link to scope chain, local first then parents and then finally Global Scope. The Closure allows a function to carry its scope from another context or we can say another lexical scope.

Here is the video explaining closure in Javascript

The closure has three scope chains: it has access to its own scope i.e. the variables defined between its curly brackets, it has access to the outer function’s variables, and it has access to the global variables.

The inner function has access not only to the outer function’s variables but also to the outer function’s parameters. Note that the inner function cannot call the outer function’s arguments to object, however, even though it can call the outer function’s parameters directly.

Here is the simple example of Closure in Javascript

function first() {
var name = 'keshav'; // here name is a local variable created by first function
function displayName() { // displayName() is the inner function, a closure
alert(name); // here we are using the variable declared in the parent component i.e the first function
}
displayName();
}
first();

We can see that we have created a local variable called name inside the first() function and also a function displayName() inside the first() function. The displayName() function is an inner function that is created inside the first() function and is only available within the body of the first() function.

The displayName() function has no local variables of its own. However, since inner functions have access to the variables of outer functions, displayName() can access the variable name declared in the parent function, first().

Hence whenever you call the outer function which is the first() function, in this case, it’s variables are always available to the inner or inside function.

What are the application of closures in Javascript

There are many practical applications of closures in javascript but closures are frequently used for partial application & currying.

Partial application is the process of applying a function to some of its arguments. The partially applied function gets returned for later use. You can write a generic function that will partially apply arguments to the target function.

So, this is all about What is closure in Javascript and how to use it. Thanks for reading!

Leave a Comment