current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite
1

Attached is the code in question.

var http = require("http");
var i = 0;

var hostNames = ['www.1800autoland.com','www.youtube.com','www.1800contacts.com'];

for(i;i<hostNames.length;i++){
    var options = {
        host: hostNames[i],
        path: '/'
    };
    http.get(options, function(res){
        console.log("url: " + hostNames[i]);
        console.log("status: " + res.statusCode);

        for(var item in res.headers){
            if(item == "server"){
                console.log(item + ": " + res.headers[item]);
            }
            if(item == "x-powered-by"){
                console.log(item + ": " + res.headers[item]);
            }
            if(item == "x-aspnet-version"){
                console.log(item + ": " + res.headers[item]);
            }
        }
        console.log("\n");
    })
};

I have an array of URLs, and the issue I came to consult the site is that in my code, hostNames[i] does not display the n-th (or "i" in this case) index as a string. The output in console would always be "undefined." I have tried String(), toString(), and a number of different methods to no avail. Could someone point me to the right direction? What is the conversion I need to do?

share|improve this question
1  
Have you tried hostNames.get(i) –  Christian Stewart Feb 25 '13 at 17:28
1  
No No No, the problem is the callback. i is no longer valid in the callback method. –  Joe Feb 25 '13 at 17:29
    
Initialize i in the for loop. for (var i = 0;...) {} –  tymeJV Feb 25 '13 at 17:30
    
Thanks @ChristianStewart that worked. Could you explain to me why my method did not work while this worked? Some users described callback while some explained it was an asynchronous issue. –  theGreenCabbage Feb 25 '13 at 17:35

3 Answers 3

up vote 1 down vote accepted

It's the closure problem, try this:

(function (i) {
http.get(options, function(res){
    console.log("url: " + hostNames[i]);
    console.log("status: " + res.statusCode);

    for(var item in res.headers){
        if(item == "server"){
            console.log(item + ": " + res.headers[item]);
        }
        if(item == "x-powered-by"){
            console.log(item + ": " + res.headers[item]);
        }
        if(item == "x-aspnet-version"){
            console.log(item + ": " + res.headers[item]);
        }
    }
    console.log("\n");
})
})(i);
share|improve this answer
    
Thank you! ANd thank you for the link to closure. –  theGreenCabbage Feb 25 '13 at 17:40
up vote 3 down vote

This is a typical closure problem that occurs because of asynchronousness. When your callback fires the value of i will always be hostNames.length.

To fix it close around the value of i:

http.get(options, (function(res) { // '(' before function is optional, I use it to indicate immediate invocation
    return function (i) {   // this is the closed value for i
        console.log("url: " + hostNames[i]);
        console.log("status: " + res.statusCode);
        // .. etc
    };
}(i))); // immediate invocation with i

What's important to realize about using closures like this, is that you're making a number of anonymous functions, not just one. Each function is bound to its own value of i.

The easiest way to avoid having to write these strange bits of code is to not use for loops directly, but use a map function. Like:

function array_map(array, callback) {
    var i, len = array.length;
    for (i = 0; i < len; i += 1) {
        callback(i, array[i]);
    }
}

This makes it so you automatically close the value of i. Your loop will look like:

array_map(hostNames, function(i, hostname) { // i and hostname have the closed value
    // .. etc
});
share|improve this answer
    
I felt this was tough to understand. Do closures make more sense as I program in javascript more? Is there any recommended reads? –  theGreenCabbage Feb 25 '13 at 17:42
    
I think closures are one of the harder parts about JavaScript for people coming from non-asynchronous languages. Don't fear it, embrace it. Closures are extremely powerful, so I hope they'll make more sense to you in the future :) I updated my answer with my array_map suggestion. –  Halcyon Feb 25 '13 at 17:44
    
A great series on JavaScript is "Crockford on JavaScript". youtube.com/watch?v=JxAXlJEmNMg (volume 1). I hope these will show you how awesome JavaScript is (or can be). –  Halcyon Feb 25 '13 at 17:48
    
I love this site. I am happy I so many great responses. I asked my co-worker about asynch and synchronous programming, and he gave me this great article that uses Starbucks coffee as an analogy: eaipatterns.com/docs/IEEE_Software_Design_2PC.pdf Synchronous would mean the guy at the cashier takes the order, makes the coffee, gives it to the customer, then looping that. Asynchronous means he takes order and gives it off to the barista to make the coffee. Asynch = fast and efficient. Synch = slow, more work, and inefficient. –  theGreenCabbage Feb 25 '13 at 18:40
    
Asynchronous programming doesn't suddenly make your program run faster :P It's a great way to achieve interactivity without some of the disadvantages that threads have. "Run fast, finish early" is the way to do event loops, and keep everything responsive. –  Halcyon Feb 25 '13 at 22:13
up vote 0 down vote

You should use the .get(i) method to retrieve the item. You do not need to initialize the counter in the array, as others have stated.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.