Travis Horn
Travis Horn

Travis Horn

JavaScript Reference: Closures

JavaScript Reference: Closures

Travis Horn's photo
Travis Horn

Published on Aug 3, 2016

2 min read

This post is part of a project to move my old reference material to my blog. Before 2012, when I accessed the same pieces of code or general information multiple times, I would write a quick HTML page for my own reference and put it on a personal site. Later, I published these pages online. Some of the pages still get used and now I want to make them available on my blog.

Photo by [Todd Diemer](https://cdn.hashnode.com/res/hashnode/image/upload/v1627409909643/BnvDimQmS.html)Photo by Todd Diemer

Emulating Private Methods

<script>
    // Create single environment with 3 functions
    var makeCounter = function() {
      // Private variable and private function
      var privateCounter = 0;
      function changeBy(val) {
        privateCounter += val;
      }
      return {
        increment: function() {
          changeBy(1);
        },
        decrement: function() {
          changeBy(-1);
        },
        value: function() {
          return privateCounter;
        }
      }   
    };


    // Create closure from function
    counter = makeCounter();

    // Use functions of closure
    document.write(counter.value() + "<br>");

    counter.increment();
    counter.increment();

    document.write(counter.value() + "<br>");

    counter.decrement();

    document.write(counter.value());
  </script>

Multiple Closures

<script>
    // Create the function
    function makeLevelAdder(level){
      return function(schoolName) {
        return schoolName + " " + level;
      };
    }

    // Create the closures
    var addElementary = makeLevelAdder("Elementary");
    var addMiddle = makeLevelAdder("Middle");

    // Print to screen using closures
    document.write(addElementary("Lincoln") + "<br>");
    document.write(addMiddle("Washington"));
  </script>

Simple Example

<script>
    // Create a function
    function func() {
      var districtName = "Central School District";
      function displayName() {
        document.write(districtName);
      }
      displayName();
    }

    // Put the function in a closure and call it.
    var closure = func();
    closure();
  </script>
 
Share this