How to use a closure to create a private counter in JavaScript?

JavascriptFront End TechnologyProgramming ScriptsWeb Development

A closure is a function that makes use of variables defined in outer functions. In JavaScript, closures are created when functions are defined inside of other functions. Closures can be used to create private variables. Private variables are variables that can only be accessed by the function in which they are defined.

Let’s first look at a simple example of closure as follows.

Example 1

Below is an example of closure with an explanation −

<html> <head> <title>Examples</title> </head> <body> <div id="result"></div> <script> function outerFunc(arg1) { var var1 = arg1; function innerFunc() { return var1; } return innerFunc; } var closure = outerFunc('Hello World'); closure(); document.getElementById("result").innerHTML = closure() </script> </body> </html>

In the above code, the outerFunc() function defines a variable called var1 and a function called innerFunc(). The outerFunc() function returns the innerFunc() function. The innerFunc() function has access to the var1 variable defined in the outerFunc() function.

Using Closures to Create Private Counters

As mentioned above, closures can be used to create private variables. Private variables are variables that can only be accessed by the function in which they are defined. Below is an example of how to use a closure to create a private variable −

Example 2

<!doctype html> <html> <head> <title>Examples</title> </head> <body> <div id="result"></div> <div id="result1"></div> <div id="result2"></div> <script> function counter() { var count = 0; return function() { return ++count; } } var closure = counter(); document.getElementById("result").innerHTML = closure() document.getElementById("result1").innerHTML = closure() document.getElementById("result2").innerHTML = closure() </script> </body> </html>

In the above code, the counter() function defines a variable called count and returns a function. The function returned by the counter() function increments the count variable by 1 each time it is called.

Example 3

<html> <head> <title>Example- Using a closure to create a private counter</title> </head> <body> <div id="result"></div> <script> function counter() { var count = 0; return function() { return ++count; } } var closure = counter(); let counts=setInterval(updated); let upto=0; function updated(){ var count= document.getElementById("result"); count.innerHTML= closure(); if(upto===1000){ clearInterval(counts); } } </script> </body> </html>

Private variables are beneficial because they cannot be accessed or modified by code outside of the function in which they are defined. This means that private variables are more secure and less likely to be accidentally modified. Private variables are also beneficial because they cannot be accessed by code that is not part of the same program. This means that private variables cannot be accessed or modified by malicious code.

Private variables have a few disadvantages. First, because they cannot be accessed by code outside of the function in which they are defined, they cannot be used to communicate between different parts of a program. Second, because private variables cannot be modified by code outside of the function in which they are defined, they cannot be used to share data between different parts of a program.

Why Use Closures to Create Private Counters?

Closures are used to create private variables because they allow variables to be defined inside of a function and then returned from the function. This means that the variables are only accessible to the function in which they are defined. Closures are also used to create private variables because they allow variables to be defined inside of an immediately invoked function expression (IIFE). An IIFE is a function that is invoked immediately after it is defined. This means that the variables defined inside of an IIFE are only accessible to the IIFE.

Conclusion

Closures can be used to create private variables. Private variables are variables that can only be accessed by the function in which they are defined. Private variables are beneficial because they cannot be accessed or modified by code outside of the function in which they are defined. Private variables have a few disadvantages, but overall they are a useful tool for creating secure and private data in JavaScript programs.

raja
Updated on 10-Oct-2022 12:12:12

Advertisements