Looping & Closure

Here is simple code to dynamically create set of buttons that greet in different languages.

document.body.onload =  createButtons;
function createButtons() {
    var greetings = [
        {lang:'English', msg:'Good Morning !!'},
        {lang:'German', msg:'Guten Morgen !!'},
        {lang:'French', msg:'Bonjour !!'},
        {lang:'Finnish', msg:'Huomenta !!'}
    ];
    document.createElement('h1');
    console.log(greetings);
    for(var i=0;i<greetings.length; i++){
        var greet = greetings[i]
        var input = document.createElement("button");
        input.appendChild(document.createTextNode(greet.lang));
        input.setAttribute('class','btn btn-default btn-lg');
        input.onclick = function(event){
            alert(greet.msg);
        };
        document.body.appendChild(input);
    }
}

Pretty simple, looping through array of objects and adding buttons with language label and greet message in respective language as alert dialog on click action.
Here is the final html looks like

Many of you guys might already have understood the issue with above code. One can easily notice that all button greet you in ‘Finnish’.

Why ?
It is all because of onclick function has become ‘closure‘.

input.onclick = function(event){
            alert(greet.msg);
};

It carries all the local variable that are in scope, here ‘greet’ object . As the value of ‘greet’ object change in every loop, all references in onclick callback closures also get same reference. So final reference in all the callback will be the last value of the greet in the loop.
I need not explains more about this typical problem, here is complete explanation available .

How to solve ?
One way to fix this issue by using functional scope. Lets wrap the callback function into another immediately invoked function with message as parameter. In this self invoked wrapper function with message as parameter, the callback function gets bind to wrapper function parameter , not the outside looping variable.

input.onclick = (function(msg){return function(event){
            alert(msg);
}})(greet.msg);

ES6 Way
ES6 has brought cleaner solution for this issue, let statement.

The let statement declares a block scope local variable, optionally
initializing it to a value.

let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope.
In our script, we just need to use let statement instate of var while storing array object.

for(var i=0;i<greetings.length; i++){
        /*Using let instate of var*/
        let greet = greetings[i];
        var input = document.createElement("button");
        input.appendChild(document.createTextNode(greet.lang));
        input.setAttribute('class','btn btn-default btn-lg');
        input.onclick = function(event){
            alert(greet.msg);
        };
        document.body.appendChild(input);
  }

So all our greet button are started displaying messages in there respective languages

Here is the complete code snippet http://jsbin.com/xekexij/edit?html,output