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 JavaScript Loops Working with 'for' Loops The Refactor Challenge – Duplicate Code

Dominick Chism
Dominick Chism
8,857 Points
Posted by Dominick Chism
Dominick Chism
8,857 Points

Stuck...

Any help on this would be appreciated. In Guil's explanation I understand almost everything, besides how const randomValue = () => Math.floor(Math.random() * 256) is linked to const color = `rgb( ${value()}, ${value()}, ${value()} )`; when generating the random number. I've read other people's questions on this video, but have had no luck with me coming away with an understanding. Thank you in advance. 

let html = '';
const randomValue = () => Math.floor(Math.random() * 256)

function randomRGB(value) {
  const color = `rgb( ${value()}, ${value()}, ${value()} )`;
  return color;
}

for ( let i = 1; i<= 10; i++ ) {
  html += `<div style="background-color: ${randomRGB(randomValue)}">${i}</div>`;
}

document.querySelector('main').innerHTML = html;

2 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points 
function randomRGB(value) {                                   // <-- the argument for "value" ...
  const color = `rgb( ${value()}, ${value()}, ${value()} )`;  // <-- ...gets called here

Since "value" is the parameter, whatever is given as the argument to "randomRGB" will get called 3 times to create "color".

  html += `<div style="background-color: ${randomRGB(randomValue)}">${i}</div>`;
//                                                   ^^^^^^^^^^^

Now, as "randomValue" is passed as the argument, it is what gets called inside "randomRGB". Note that the reference to "randomValue" is being passed without it being called yet. Does it make sense now?

Dominick Chism
Dominick Chism
8,857 Points
Dominick Chism
Dominick Chism
8,857 Points

It frustrates me to say that I still don't understand. In another explanation you said: "The randomValue function doesn't get called until the point where you see value() in the other function." I don't know why I can't get grasp concept.

Is there another way you can explain how this gets called and perhaps dumb it down? Sorry for the trouble and thank you in advance. 

let randomValue = () => Math.floor(Math.random() * 256);

function randomRGB(value) {
  const color = `rgb( ${value()}, ${value()}, ${value()} )`;
  return color;
}
Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

Are you comfortable with the concept of parameters as used in functions? Remember that they only act as placeholders for the arguments that will be passed in when the function is called.

So when the function randomRGB is defined, "value" is only a placeholder, but when the function is called in the loop using randomRGB(randomValue) that means that "randomValue" will replace "value" in the function.

So what the function actually does at that point is this:

return `rgb( ${randomValue()}, ${randomValue()}, ${randomValue()} )`;
Dominick Chism
Dominick Chism
8,857 Points
Dominick Chism
Dominick Chism
8,857 Points

After reading your explanation and reviewing Guils video Function Parameters and Arguments, I understand now. Thank you so much for the help!