Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript Loops Working with 'for' Loops The Refactor Challenge – Duplicate Code

Dominick Chism
Dominick Chism
5,887 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
216,812 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
5,887 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
216,812 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
5,887 Points

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