Implementing a closure to "carry" an array index to another array?

Question

Based on the answer I received here, it seems I need a closure to get this code working correctly. Unfortunately, despite the links provided, I am still confused as to how a closure should be implemented in my case, so when a specific image is clicked a specific URL unique to that image is opened. (Currently, I am just getting an "undefined" because, as Pointy said, 'the value of "i" will be links.length'.)

In a nutshell, how do I "carry" the number/index of "i" over to "window.location.replace(pages[]);", and if a closure is indeed correct in this case, how would I make use of one?

Hate to keep bothering people but I don't think I can figure this out on my own. Thanks.

Original code:

var links = ["#portfolio", "#animations", "#games"];
var pages = ["http://www.gog.com", "http://www.google.com", "http://www.hamumu.com"];

$(function() {
        for (var i=0; i<links.length; i++) {
            //for (var e=0; e<pages.length; e++) {
                $(links[i]).click(function() {
                    window.location.replace(pages[i]);
                });
            //}
        }
    });

Answer 1

You can do it with Function#bind, which is an ES5 feature that can be shimmmed on older browsers, like this:

var links = ["#portfolio", "#animations", "#games"];
var pages = ["http://www.gog.com", "http://www.google.com", "http://www.hamumu.com"];

$(function() {
    for (var i=0; i<links.length; i++) {
        //for (var e=0; e<pages.length; e++) {
            $(links[i]).click(function(page) { // 1. Accept argument into function
                window.location.replace(page); // 2. Use the argument
            }.bind(null, pages[i]));           // 3. Use Function#bind to bind the argument
        //}
     }
});

Function#bind returns a function that, when called, will call the original function with a particular this value (which we don't care about here) and any arguments you bind to it (followed by any arguments given when the new function is actually called).

A simpler example may help with understanding bind more:

// A function that shows its arguments
function foo(a, b, c) {
    display("a = " + a);
    display("b = " + b);
    display("c = " + c);
}

// Get a function with an argument bound to it
var f = foo.bind(null, 1);

// Call the function -- notice how we get the bound
// argument first, then the ones we supply with the
// call
f(2, 3);

// Just a utility display function
function display(msg) {
  document.body.insertAdjacentHTML(
    "beforeend",
    "<p>" + msg + "</p>"
  );
}

---

If you wanted to do it without bind, I usually recommend a separate builder function you reuse (rather than creating and throwing away the builder function on each loop iteration):

var links = ["#portfolio", "#animations", "#games"];
var pages = ["http://www.gog.com", "http://www.google.com", "http://www.hamumu.com"];

$(function() {
    for (var i=0; i<links.length; i++) {
        //for (var e=0; e<pages.length; e++) {
            $(links[i]).click(makeClickHandler(pages[i]));
        //}
    }

    function makeClickHandler(page)
        return function() {
            window.location.replace(page);
        };
    }
});