JavaScript Closures

by Wentz Wu

HTML

<h1><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures" target="_blank">JavaScript Closures</a></h1>
<p>
  A closure is the combination of a function and the lexical environment within which that function was declared.
</p>
<div id="result">
  Start loop (NG)
</div>
<div id="result2">
  Start loop (OK)
</div>

<h1>
References
</h1>
<ol>
  <li><a href="https://spin.atomicobject.com/2014/10/20/javascript-scope-closures/" target="_blank">What You Should Already Know about JavaScript Scope</a>
    <cite>Lexical scoping is nice, because we can easily figure out what the value of a variable will be by looking at the code</cite>
    <cite>Merely accessing a variable outside of the immediate scope (no return statement is necessary) will create something called a closure.</cite>
  </li>
  <li><a href="https://scotch.io/tutorials/understanding-scope-in-javascript" target="_blank">Understanding Scope in JavaScript</a>
    <cite>
    Lexical Scope means that in a nested group of functions, the inner functions have access to the variables and other resources of their parent scope. This means that the child functions are lexically bound to the execution context of their parents. Lexical scope is sometimes also referred to as Static Scope.
  </cite>
  </li>
  <li><a href="https://www.linkedin.com/pulse/understanding-scope-context-javascript-pritpal-singh" target="_blank">Understanding Scope and Context in JavaScript</a>
    <cite>
    Accessing variables outside of the immediate lexical scope creates a closure. In other words, a closure is formed when a nested function is defined inside of another function, allowing access to the outer functions variables.
  </cite>
  </li>
  <li><a href="https://addyosmani.com/resources/essentialjsdesignpatterns/book/#constructorpatternjavascript" target="_blank">Learning JavaScript Design Patterns</a></li>
</ol>

CSS

div {
  display: inline-block;
  border: 1px solid grey;
  padding: 5px;
  border-radius: 5px;
}

div:first-of-type {
  background-color: pink;
}

div:nth-of-type(2) {
  background-color: lime;
}

div:hover {
  cursor: pointer;
}

cite:before {
  content: ' ';
  display: block;
}

JavaScript

var result = document.getElementById("result");
var result2 = document.getElementById("result2");

for (var i = 0; i < 3; i++) {

  result.addEventListener("click", function() {
    result.innerText += ("\r" + i);
  });

  result2.addEventListener("click", getEventHandler(i));

}

function getEventHandler(i) {
  return function() {
    result2.innerText += ("\r" + i);
  }
}

/***************************/
var Module = (function() {
    var privateProperty = 'foo';

    function privateMethod(args) {
        alert("functionprivateMethod");
    }

    return {

        publicProperty: '',

        publicMethod: function(args) {
            alert("publicMethod");
        },

        privilegedMethod: function(args) {
            return privateMethod(args);
        }
    };
})();

//Module.publicMethod("test");

/***************************/
(function(window) {
          
    var foo, bar;

    function private() {
         alert("private");
    }

    window.Module2 = {

        public: function() {
           private();
        }
    };

})(this);

//Module2.public("test2");