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!

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 JavaScript Loops, Arrays and Objects Tracking Multiple Items with Arrays Build a Quiz Challenge, Part 2 Solution

Ivana Lescesen
Ivana Lescesen
19,442 Points

Why do we need to return the string?

Why do we need to return the string? Why does Dave use it in his code?

return listHTML;

In previous video https://teamtreehouse.com/library/javascript-loops-arrays-and-objects/tracking-multiple-items-with-arrays/using-for-loops-with-arrays

it only needed to be :

print(listHTML);

What is the difference, thank you so much :)

3 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! Remember a day or two ago when I helped with the random color generator you had? And we fixed the problem. This is a great example of that same problem.

In the first example, he used print(listHTML) from inside the function. Because listHTML is declared inside that function, it is only available while the function is executing. So if we use it then to print out, it's ok.

But in the second example, he uses code outside that function to print out. Which means that we have to get that HTML string we just built up in that function and send it into the spot that needs it. To do that we have to call the function. The function will then return or send back its result to the place that called it.

Let's take a look at a simple example I whipped up for you:

function returnZ() {
  var x = 2;
  var y = 3;
  var z = x + y;
  return z;
}

var num1 = 8;

console.log(num1);
console.log(returnZ());
// console.log(x);

You might want to try this out in the console. Because our num1 is declared outside the function, JavaScript recognizes it and can log it to the console. In the second log to the console we call the returnZ function which then returns a value of 5. That number is logged to the console. But if you uncomment that last line, you'll receive an error. Because x does not exist outside the function... only inside. This is a concept known as "scope" and can take a little while to grasp. I hope this helps! :sparkles:

edited for additional note

In regards to your random color generator, this was essentially what you were doing. You'd used a function to build up the RGB color, but then you weren't sending it anywhere. And you were trying to access that variable from outside the function. That's why we implemented a call to the function generating your color and had it pass along the result to the piece of code that called it :smiley:

Ivana Lescesen
Ivana Lescesen
19,442 Points

Thank you so much, so we have to use return listHTML because it will be outside of the function and will interact with

  ```javascript
      function buildList(arr) {

var listHTML = '<ol>'; for (var i = 0; i < arr.length; i += 1) { listHTML += '<li>' + arr[i] + '</li>'; } listHTML += '</ol>'; return listHTML; }

      ```

other code like this one below

```javascript

html += buildList(correct);

      ```

By returning a function we ('transfer its value' so to speak from one place to another in this example from to function to html document )

Is that corect?

Thank you :)

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Ivana Lescesen yes. it's the function buildList that's taking in the array named correct. We call the function and send it our correct array. Then it's going to run that code and build up that HTML string based on the array we sent in. The return statement doesn't really send back the function, rather it sends back the value we tell it to send back. In this case, the HTML that was generated by that function :smiley:

Ivana Lescesen
Ivana Lescesen
19,442 Points

You are a rock star :) I can't thank you enough :)

Ivana Lescesen
Ivana Lescesen
19,442 Points

You deserve it, I can't even begin to tell you how much you helped me.

Happy coding :)