JS ScratchPad

index.html

<p id='help'>Help text</p>
<p><input type='text' id='name' name='name'></p>
<p><input type='number' id='age' name='age'></p>

js-scratchpad.markdown

JS ScratchPad

A Pen by Debasish Panda on CodePen.

License.

script.js

// var counter = function(){
// // Private variables
//   var privateCounter = 0;

//   function changeBy(value){
//     privateCounter+= value;
//   }

//   return {
//     //   A closure
//     increment : function(){
//       changeBy(1);
//     },

//     //   A closure
//     decrement : function(){
//       changeBy(-1);
//     },

//     //   A closure
//     value : function(){
//       return privateCounter;
//     }
//   }

// };

// var counter1 = counter();
// var counter2 = counter();

// console.log(counter1.value());
// counter1.increment();
// counter1.increment();
// console.log(counter1.value());
// counter1.decrement();
// console.log(counter1.value());

// console.log(counter2.value());
// counter2.increment();
// counter2.increment();
// console.log(counter2.value());
// counter2.decrement();
// console.log(counter2.value());
// counter2.decrement();
// console.log(counter2.value());

/*****************************************************************************************************/

// // A function factory
// function makeAdder(x){
//   return function(y){
//     return x+y;
//   }
// }

// // Both are closures
// // Js remembers the value of x passed even after the lifetime of the makeAdder function as it is a part of closure
// var increment = makeAdder(1);
// var decrement = makeAdder(-1);

// console.log(increment(5));
// console.log(decrement(5));

/*****************************************************************************************************/


function showHelp(help) {
  document.getElementById("help").innerHTML = help;
}


// The following is a closure which'll point to a unique 'help'
function makeHelpCallBack(help){
  return function(){
    showHelp(help);
  }
}

function setupHelp() {
  var helpTextData = [
    {
      id: "name",
      help: "Your full name"
    },
    {
      id: "age",
      help: "Your age in years"
    }
  ];
  
//   Works
  // helpTextData.forEach(function(value, key){
  //   document.getElementById(value.id).onfocus = function(){
  //     showHelp(value.help);
  //   }
  // });

// Doesn't work as the closures share the same lexical scope at the end of the loop
// for (var i = 0; i < helpTextData.length; i++) {
//     var item = helpTextData[i];
//     document.getElementById(item.id).onfocus = function() {
//       showHelp(item.help);
//     }
//   }
  
//   Works because let uses block scoping
  
  for (var i = 0; i < helpTextData.length; i++) {
    let item = helpTextData[i];
    document.getElementById(item.id).onfocus = function() {
      showHelp(item.help);
    }
  }
  
//   Works as each closure holds reference to unique lexical environments
  
  // for (var i = 0; i < helpTextData.length; i++) {
  //   var item = helpTextData[i];
  //   document.getElementById(item.id).onfocus = makeHelpCallBack(item.help);
  // }
}

setupHelp();