Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Kristian Woods
Kristian Woods
23,414 Points

How can you return information back to a function from a loop?

I have created a function that takes an array as an argument. I then want to loop through that array and return the value to the function. I then want to be able to output the value of that array using different methods e.g. console.log() alert() etc.

However, I'm having trouble achieving this. I can only receive the value from the array if I explicitly use something like console.log(). However, that's limiting. 

let fruitArray = [
    'pear',
    'apple',
    'strawberry'
];

I've tried the following methods:

let loopArray = (arr) => {
   let arrayItem; 
   for(let i = 0; i < arr.length; i++) {
       arrayItem = arr[i];
   } 
    return arrayItem;
};

console.log(loopArray(fruitArray));

// returns 'strawberry'

let loopArray = (arr) => { 
   for(let i = 0; i < arr.length; i++) {
      let arrayItem = arr[i];
       return arrayItem;
   } 
};

console.log(loopArray(fruitArray));

// returns 'pear'

let loopArray = (arr) => {
    let arrayItem;
   for(let i = 0; i < arr.length; i++) {
      arrayItem = arr[i];
   } 
};

console.log(loopArray(fruitArray));

// returns 'undefined'

What am I doing wrong?

2 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Not all of your examples have a "return" statement. That's necessary to return a value, and why the last one returns "undefined".

But your intentions are not clear. You say you "want to loop through that array and return the value..." — but which value? An array would have several. If you want to output all of them, the output statement would have to be inside the loop.

Kristian Woods
Kristian Woods
23,414 Points

Hey, thanks for getting back to me, Steven. Apologies for the ambiguous question - yes, I'm looking to return all the items within an array.

So, are you saying that I have to include the output statement within the loop?

let loopArray = (arr) => { 
   for(let i = 0; i < arr.length; i++) {
      let arrayItem = arr[i];
      console,log(arrayItem);
   } 
};

But that would mean I could only ever console.log the items in the array, no? What would I do if I wanted more flexibility than that? like, for example, use alert(), instead?

Thanks

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

You could pass the desired output function as an additional argument (this is known as a "callback"):

// the 2nd parameter "out" is the callback function:
let loopArray = (arr, out) => {
  for (let i = 0; i < arr.length; i++) {
    out(arr[i]);
  }
};

const paragraph = text => document.write("<p>" + text + "</p>");

loopArray(fruitArray, alert);        // use alerts
loopArray(fruitArray, console.log);  // write to console
loopArray(fruitArray, console.info); // write to console (highlighted)
loopArray(fruitArray, paragraph);    // write paragraphs to page using custom function
Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Hi Kristian,

The problem is that in none of your examples are you returning an array. You're always just returning a single item (or in the last instance not returning anything at all). If you want to return an array and use a for loop to do it, you need to create the empty array, populate it inside the for loop, and then return it outside the for loop. Here's an example:

let fruitArray = [
    'pear',
    'apple',
    'strawberry'
];

let loopArray = (arr) => {
   let newArray = []; 
   for(let i = 0; i < arr.length; i++) {
       newArray.push(arr[i]);
   } 
    return newArray;
};

console.log(loopArray(fruitArray));  // [ 'pear', 'apple', 'strawberry']

Then you can alert it, console.log it, or whatever else you want. This isn't a very good example, though, since there's no real point to duplicating an array via loop. Here's a slightly more useful example:

let numbers = [4, 19, 2, 8]

let doubleArrayItems = (arr) => {
   let doubledArray = []; 
   for(let i = 0; i < arr.length; i++) {
       doubledArray.push(arr[i] * 2);
   } 
    return doubledArray;
};

console.log(doubleArrayItems(numbers));  // [8, 38, 4, 16]

You can also store the result of the function in a variable and then use it later however you like.

Hope that makes sense!

Cheers :beers:

-Greg

Kristian Woods
Kristian Woods
23,414 Points

Greg, Steven - THANK YOU so much for taking the time to answer my question - both solutions are great!