Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Difficulty Level : Expert
  • Last Updated : 03 Nov, 2021

A closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function.

Example: Here the inner forms closure with outer. The str variable can be called a private member whose value we can access, but not modify directly.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Javascript




<script>
    function outer() {
        let str = "GeeksforGeeks";
        function inner() {
            console.log(str);
        }
        return inner;
    }
    const fun = outer();
    fun();
</script>

Output:



GeeksforGeeks

The concept of a private counter means that publicly/globally we could not modify the counter variable directly. The below step-by-step guide will teach you how to implement a private counter with closure and understand it.

Step 1: Create counter.js and index.html files. You can give any allowed names to the files.

Step 2: First begin with the index.html file and create a front-end to see the counter. We would create a <div> to show the value of the counter and two buttons, one for incrementing and the other for decrementing the counter.

index.html




<!DOCTYPE html>
<html lang="en">
  
<head>
    <!-- counter.js becomes available
    at execution time-->
    <script src="counter.js"></script>
</head>
  
<body>
    <h1 style="color: blue;">
        Private Counter using Closure
    </h1>
  
    <!-- This div displays the value of
    private counter-->
    <div id="counter_div" style=
        "margin-left: 5%; color: red;">
  
        <!-- Default value of counter is zero-->
        <h2>0</h2>
    </div>
  
    <!-- Buttons for incrementing and 
    decrementing the value of private counter-->
    <button onclick="counterHandler(this)" 
        value="1">
        Increment
    </button>
      
    <button onclick="counterHandler(this)" 
        value="0">
        Decrement
    </button>
</body>
  
</html>

Here we are handling clicks on buttons using the counterHandler function which is in the JavaScript file. The value of the buttons helps us to distinguish which button was clicked. And have an id of the div so that we could use it to update it from JavaScript code.

Step 3: Let’s now work with the counter.js file and implement behind-the-scenes functions.

counter.js






// Global function which would form
// closure with modify function
function counter() {
  
  // Private counter variable
  let count = 0;
  
  // To increment the value of counter
  function increment() {
    count++;
  }
  
  // To decrement the value of counter
  function decrement() {
    count--;
  }
  
  // Modify function forms closure
  // here which is used outside
  function modify(val) {
  
    // To check increment or decrement
    // button has been clicked
    if (val === "1") increment();
    else if (val === "0") decrement();
  
    // Return the counter
    return count;
  }
  
  // Returning to make it available
  // outside counter function
  return modify;
}
  
// Storing the closure modify
const closure = counter();
  
// This function handles the button
// click, objButton to get value
function counterHandler(objButton) {
  
  // Storing the value return by modify
  let count = closure(objButton.value);
  
  // Getting div by it's id
  // and modifying its inner html
  document.getElementById("counter_div")
    .innerHTML = "<h2>" + count + "</h2>";
}

When the buttons get clicked counterHandler is called, we get the value of the button from objButton Object. If the value is one (1) then to be incremented else to be decremented the value of the counter which is count variable.

In the counter function, we have a counter variable count, increment function to increment, and decrement function to decrement the value by one. The modify function is returned as closure to the global when the counter function is called and we store its instance in closure constant.

Finally, we modify the div content to the value of the counter returned by closure using its innerHTML property.

Step 3: Copy the full path of the HTML index.html file and paste it into any browser. After loading the HTML file in the browser, you would see something similar to it. Now play with the increment and decrement buttons and observe the value of counter changing.

Now let’s see what happens in the backend using Developers Tool when the button is clicked. In the below image we had made the counter value equals -1. To see how the scope is defined and related to it.

Scope in Developers Tool

Counter value on the frontend

This is how you could implement a private counter variable using closures in JavaScript. Closures provide a way to achieve the functionality of data encapsulation in JavaScript.

References: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!