Closure vs Non-closure

This script compares between closures and non-closure

by queryj

JavaScript

// No closure:
for (var i = 0; i < 5; i++) {
    var btn = document.createElement("button");
    btn.appendChild(document.createTextNode("Button " + i));
    btn.addEventListener("click", function () {
        console.log(i);
    });
    document.body.appendChild(btn);
}

var div = document.createElement("hr");
document.body.appendChild(div);

// Closure:
for (var i = 0; i < 5; i++) {
    var btn = document.createElement("button");
    btn.appendChild(document.createTextNode("Button " + i));
    btn.addEventListener("click", (function (i) {
        return function () {
            console.log(i);
        }
    })(i));
    document.body.appendChild(btn);
}

var hr = document.createElement("hr");
document.body.appendChild(hr);

// Closure:
for (var i = 0; i < 5; i++) {
    var btn = document.createElement("button");
    btn.appendChild(document.createTextNode("Button " + i));

    (function (x) {
        btn.addEventListener(
            "click",
            function () {
                console.log(x);
            }
        );
    })(i);

    document.body.appendChild(btn);
}