1

There's a great stackoverflow question about explaining JavaScript closures to six-year olds.

That question features a number of very useful answers. One of the answers refers to the entry for Closures at the Mozilla Developer Network JavaScript guide, which does indeed provide a succinct and understandable explanation (specifically, that a closure stores a function and its environment).

However, the MDN entry under Practical Closures has me perplexed... specifically, where is the need for a closure in their example for resizing text? Can someone clarify for me why they need closure for the makeSizer function?

As a beginner programmer I can only assume that my alternative that does not use closures, shown below, is somehow naive and incorrect (despite seeming more succinct and efficient)?

I'm particularly interested in the justification for a text size closure when the MDN entry reads:

It is unwise to unnecessarily create functions within other functions if closures are not needed for a particular task, as it will negatively affect script performance both in terms of processing speed and memory consumption.

Version without closure:

HTML (modified from the MDN original)

<p>Some paragraph text</p>
<h1>some heading 1 text</h1>
<h2>some heading 2 text</h2>

<a href="#" class="sizer">12</a>
<a href="#" class="sizer">14</a>
<a href="#" class="sizer">16</a>

CSS (unmodified)

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

h1 {
  font-size: 1.5em;
}
h2 {
  font-size: 1.2em;
}

JavaScript (modified)

(function makeSizer() {
   var sizers = document.getElementsByClassName('sizer');
    for (var i = 0; i < sizers.length; i++) {
        sizers[i].onclick = function () {document.body.style.fontSize = this.innerHTML + "px";};
    }; // close for...
})(); // close makeSizer;

JSFiddle (alternative to the original from MDN)

Original from MDN

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
Community
  • 1
  • 1
lithic
  • 181
  • 9

2 Answers2

0

It's primarily useful for preventing objects from polluting the global space. In a closure you can make the variables local and an internal "implementation" detail. The main benefit of closures is really the ability to create private scope.

The performance argument made here really relates to micro optimization at this level, and is not a practical concern.

TGH
  • 38,769
  • 12
  • 102
  • 135
  • 1
    Thank you for your response. So does the alternative version I proposed, with `document.getElementsByClassName` and `this` for the .onclick function _pollute the global space_? I'm still not entirely clear on how the version with closures is better... – lithic Oct 21 '14 at 09:20
0

You could use closure if you need to store values within an certain name space and reuse them later, instead of using the globale name space example.

Global namespace:

var i = 0;
function inc() {
   i++;
   console.log(i);
}
inc(); // output 1 
console.log(i); //output 1

Closure:

function closure() {
   var i = 0;
   return function() {
      i++;
      console.log(i);
   }
}
myClosure = new closure();
myClosure(); //output 1;
myClosure(); //output 2;
console.log(i); //undefined