what is closure in javascript, advantages and disadvantages?

Closure give you access to outer function scope parameters from an inner function, even after the outer function has returned. In Javascript, closures are created every time function is created.

To understand closures we need to understand why do we use closures
and closure is the particular problem we trying to solve.
Here is very good reason that why we have closure in javascript. Javascript has Lexical Scope.
Lexical Scoping means the variable that are defined outside your scope are automatically available in inner scope, which means you don’t need to pass those to inner scope.
Let’s understand this with the help of example.

In above piece of code I have created a variable and a arrow function test which print “i”, so “i” is available inside because of lexical scoping. It should give 1 when executed.

Now let’s understand how Child function can access of the variables and arguments of the parent function, let’s understand this with example.

In above code ChildFunction can access the parentVariable.

Now according to definition above ChildFunction can access the parentVariable even if execute separately.

In above code we have ParentFunction which has one variable parentVariable and return ChildFunction only. We have one more variable executeChild refference to ChildFunction only not to ParentFunction. So when code get executed ChildFunction still have access to parentVariable which is defined outside scope in ParentFunction. This is called Closures.

One important characteristic of closure is it keep the state of outer variable between the multiple calls. Inner function does not contain the separate copy of variable, it just keep the reference of the outer variable. Let’s understand this with example.

In above example ParentFunction return the reference of ChildFunction. ChildFunction increase parentVariable every time executeChild executed it increase parentVariable value by one.

When to use closures?

Closures are very helpful to hide the implementation details in javascript. Closures can be useful to create private variables and functions.

In above example incremet(), decrement() and value() be public function because they are included in return type, where as changeBy() becomes private function because it is not returned and only used internally by increment() and decrement().

Advantages of using Closures
As we all know variables which we create inside function have local scope and only accessible in side the function not outside the function.
Problem 1: Also variable defined inside the function created when we call function and destroyed which function close. We can define global variables which created when program starts till the end of program and accessible any where in the program.
Problem 2: If we define the global variable these can be changed any where in program.
Solution :
Data Encapsulation
we can overcome above problems by using closures.
1. By using a closure we can have private variables that are available even after a function task is finished.
2. With a function closure we can store data in a separate scope, and share it only where necessary.

Disadvantages of using Closures
Closures not only have advantages it also have disadvantages. If you are using closures there are two disadvantages which you need to take care while using.

1. As long as the closure are active , the memory can’t be garbage collected.
   example : If we are using closure in ten places then unless all the ten process complete it hold the memory which cause memory leak.
   How to fix this?
   If there come a point in you program where you are done using closure then you need to set closure to null.
2. Creating a function inside a function leads to duplicity in memory and cause slowing down the application.
   How to fix?
   Use closures only when you need privacy otherwise use module pattern to create new objects with shared methods.

Please comment if you have still have question. I will try to clear you all questions.
Cheers, Happy Coding!!

More articles
Useful Javascript Array trick which one should know
What is event loop in javascript?
How to start with GraphQL?
Understanding React Hooks