Understanding JavaScript Closures!

You might've heard about closures in JavaScript, but you don't actually know what it is or why it is used. In this blog I'll give details about closures that you need to know.

What are closures?

As per the MDN docs,

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment)

In other words, a closure gives you access the outer function's variables inside the inner function. Closures are created every time a function is created. Let's take a look at an example

In the above example, I've created a function which takes a parameter . This function returns another function which log the name(from outer function) to the console.

So, What happens is that when we call the function, the inner function is returned and assigned to and when we call this function, is logged onto the console.

But, you might be asking yourself that isn't the validity of local variables inside function expires once the function is finished executing? So, how come this inner function lets you access the local variable of it's parent function?

The reason is functions in JavaScript form closures. A closure is a combination of function and lexical environment within which the function was created. This lexical environment consists of any local variables that were present at the time the closure was created.

In this case, is a reference to the instance of the function that is created when runs. This instance of maintain a reference to its lexical environment within which the variable exists. For this reason, when the inner function is called the variable is available for use

That's what closures is all about in JavaScript!

Another example

Let's take a practical example to understand it better.

In this example, we create a function that accepts a parameter and returns a function which changes the background color of the button.

and are now functions which when invoked will change the background color of the button to the respective argument passed to the function.

Private methods with closures

Closures can help you to actually emulate private methods. This could help in restricting access to variables or methods. The following example below demonstrates how public function access private members.

Conclusion

That's all about closures in short. In case you want to dig deeper, you can also refer to the MDN Docs

My Socials

Twitter - shaancodes

Instagram - shaancodes

GitHub - shaancodes