Why I am getting array[i] value of for loop is undefined

Question

I am new to nodeJs. In for loop I am getting array[i] value undefined after get the data from some url. I don't know how to solve this problem. Please help me.

Here is my code

urls =['url1','url2','url3','url4']
 for (var i = 0; i < urls.length; i++) {
  console.log(urls[i]) // getting value
  var opt = {
    url :urls[i],
      headers: {
     'Authorization': 'Bearer '+reply
    } 
   }
  request.get(opt,function(error,response,body) {
     console.log(urls[i]) // getting undefined
     if(!error) {
        enrichment_data.push({type:body});
     } else {
     enrichment_data.push({type:''})
   }
 })
}

Change var i to let i for lexical scope. To understand your problem, also try console.log(i) in the problematic location as well. — Patrick Roberts
– Patrick Roberts, Commented Sep 27, 2017 at 6:47

Community · Accepted Answer · 2020-06-20 09:12:55Z

According to MDN, this type of logical error in understanding JavaScript closures, is a common mistake.

There are two practical ways to solve this. Sticking with ES5 only, the most canonical way to solve this would be to use urls.forEach() instead:

var urls = ['url1', 'url2', 'url3', 'url4']

urls.forEach(function(url, i) {
  console.log(urls[i]) // getting value
  var opt = {
    url: urls[i],
    headers: {
      'Authorization': 'Bearer ' + reply
    }
  }
  request.get(opt, function(error, response, body) {
    console.log(urls[i]) // getting undefined
    if (!error) {
      enrichment_data.push({
        type: body
      });
    } else {
      enrichment_data.push({
        type: ''
      })
    }
  })
})

Using this method, you create a new function scope that preserves the value of each i, even within the asynchronous function, so that the variable reference doesn't get overwritten by later iterations of the for loop you had earlier.

Your second option would be to introduce ES6 lexical scope variable declarations using let like so:

var urls = ['url1', 'url2', 'url3', 'url4']

for (let i = 0; i < urls.length; i++) {
  console.log(urls[i]) // getting value
  var opt = {
    url: urls[i],
    headers: {
      'Authorization': 'Bearer ' + reply
    }
  }
  request.get(opt, function(error, response, body) {
    console.log(urls[i]) // getting undefined
    if (!error) {
      enrichment_data.push({
        type: body
      });
    } else {
      enrichment_data.push({
        type: ''
      })
    }
  })
})

Lexical scope means that any reference to i inside the block scope of the for loop, even within the body of the asynchronous function, will reference that particular iteration of the for loop, allowing it to behave as it appears like it should.

AbhinavD · Accepted Answer · 2017-09-27 08:33:57Z

0

Great answer by Patrick. I wanted to add few points.

To answer the question, why you are getting undefined at console.log(urls[i]) because the value of i is 4 and nothing is present at index 4.

Now to the point why i is 4. request is an async call and once you call request.get, it goes through event loop and gets written to the stack (with the right url) to be called. . This stack would be called only when the current call is over, which is after your for loop is over. Your loops gets over only when i is 4 and var is global scope

Here is a great video to understand how event loop works.

edited Sep 27, 2017 at 8:33

answered Sep 27, 2017 at 7:55

AbhinavD

7,3825 gold badges32 silver badges41 bronze badges

2 Comments

mJehanno Over a year ago

oh i thought it would be a scope problem : i shouldn't exist outside the loop so it shouldn't exist in the request's console.log()

AbhinavD Over a year ago

If I run this

const request = require('request'); const urls =['http://www.google.com','http://bing.com','https://duckduckgo.com'];  for (var i = 0; i < urls.length; i++) {   console.log(urls[i]) // getting value   var opt = {     url :urls[i]    }   request.get(opt,function(error,response,body) {      console.log(i);      if(!error) {        console.log('success');      } else {       console.log('failure');    }  }); }

The output is 3 success 3 success 3 success

Collectives™ on Stack Overflow

Why I am getting array[i] value of for loop is undefined

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related