demistify closures concepts

core closure concepts

by bhupendra negi

HTML

<div id = "before">
</div>
<div id = "after">
</div>

CSS

div{
   background-color:green;
   width:80px;
   height:50px;
   cursor:pointer;
   float:left     
}
div a {
  float:left 
}

JavaScript

/* closures 1. inner function access to outer fn variables */

var globalIntro = "Your Name:";

function test()
{
function showName(firstName)
{
    var fnIntro = "is";
    function makefullName(lastName)
    {
        return globalIntro + fnIntro + firstName + lastName;
    }
    
    return makefullName; 
}
 return showName;   
}

var outermostfn = test();
var outerfn = outermostfn(" rocky ");
console.log(outerfn);
var innerfn = outerfn(" singh ");
console.log(innerfn);

/*----------------------------------------------*/
//closure 2. privarte member emulation in js

function generateID()
{
  var id = 100;
    
    return { 
        getID:function()
        { 
            return "ID =>" +id;
        },
        setID:function(temp)
        {
            id = temp;     
        }        
    }  
}

var obj = generateID();
console.log(obj);
console.log(obj.getID());
obj.setID(101);
console.log(obj.getID());

/* ---------------------------------------------------------*/

//loop problem case 
// issue

function addLinks() {
 
    var container = document.getElementById("before");    
for(var i=0;i<3;i++)
{
  var link = document.createElement("a");
    link.innerHTML = "Link :"+i;
    link.onclick = function() { alert(i);};
    container.appendChild(link);
}       
    
}

addLinks();

// correct way

function addLinks2() {

var container = document.getElementById("after");    
for(var i=0;i<3;i++)
{
 var link = document.createElement("a");
 link.innerHTML = "Link :"+i;
 link.onclick = function(value) 
 { return function() {
     alert(value);}
       }(i);
container.appendChild(link);
}   
    
}

addLinks2();