Understanding What Closures are in JavaScript - 2

Understanding What Closures are in JavaScript - 2

Hello readers, In part-2 of Understanding What Closures are in JavaScript. we will cover some major advantages and disadvantages of closures in JavaScript And if you don't know what closures are, try giving a read to the first part of the blog here

Advantages of Closures

Closures help in,

  1. Module Design patterns
  2. High order functions
  3. Function currying
  4. Data Hiding and encapsulation

*> The major one is Data hiding/ Data Privacy and encapsulation, we are going to talk about that. If you know java it allows us to declare methods as private meaning they can be only called by other methods in the same class, JavaScript does not provide a native way of doing that, So here come closures to the rescue

If we want to create a private variable or some data not to be accessed by everyone(global scope), Then closures can help us in the following way Let us create a function counter and inside the function, we declare the private data, So here we declare the count variable which is only accessible by the function counter and its nested functions, This access to count variable is provided via closure to the nested functions, a closure is formed by the increment function with the variable count, as it is available in its lexical scope not in its local scope Another thing here is that we are not polluting the global scope with a lot of bindings

function counter(){
  let count = 0
  return function increment(){
    counter++
    console.log(counter)
  }
}
const counter1 = counter()

Let's see few more things, can you guess the output of the code below

function counter(){
  let count = 0
  return function increment(){
    count++
    console.log(count)
  }
}
const counter1 = counter()
counter1()
counter1()

const counter2 = counter()
counter2() 
counter2()

If you are with this, you are right,

Output
1
2
1
2

But the question is how/why? This is another advantage of closure, what happens here is when we declared the counter1 variable and invoked the counter function on it, A copy of what counter function returned and its bindings were saved to counter1 variable, So when we call counter1 it remembers its bindings and reference to them and updates the count value accordingly. In the second case when we declare counter2 and try doing the same thing, Here it creates a totally different copy of the counter function and stores in counter2, It does not relate to counter1 So this helps us create separate instances of a function without redeclaring it again with separate names or something related $$\\$$

Talking about disadvantages of closures

  1. Variables used in closures are not garbage collected.
  2. Over Consumption of memory due to the creation of functions inside functions.

There could be a lot of overconsumption of memory, if you use a lot of closures say functions inside functions, because every time a closure is formed it consumes a lot of memory (leads to duplication in memory) because all the closed over variables are not garbage collected(means: javascript frees the memory of the code which is not reachable), which means all the bindings of all closures formed are still in memory and are not cleared or garbage collected until the program ends This can lead to a slowdown in performance or can even freeze the browser $$\\$$

Thank you for the read. Please provide your feedback in the comment section