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

Nick Huemmer
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Nick Huemmer
Front End Web Development Techdegree Graduate 26,840 Points
Posted by Nick Huemmer
.a{fill-rule:evenodd;}techdegree seal-36
Nick Huemmer
Front End Web Development Techdegree Graduate 26,840 Points

The final solution Guil presents, could someone explain to me why it works?

Guil presents a final solution to the problem in this video, and I think I understand why it works, but it's not totally clear.

Could you help me out?

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;`

Does adding `value` to the `randomRGB` cause the rgb values to be pulled into the randomRGB function when it's called in the `for` code block?  It seems sort of "bass-ackwards" to me.
Jonathan Hermansen
Jonathan Hermansen
25,935 Points

Yes. In your loop you call randomRGB(randomValue), which reference to the randomValue arrow function as the argument. So your code will execute randomValue-function three times inside your randomRGB-function, e.g. generate three different values between 0 and 255.

3 Answers

Abdulsalam Jumah
Abdulsalam Jumah
3,679 Points

ok first of all I think he used multiple functions just to try and demonstrate different ways of doing the same thing. he uses the randomValue() arrow function to return a generated value which is going to be from 0 to 255 and, randomRGB(value) to generate the rgb(x, x, x) string and uses the value as parameter just for flexibility, allowing the value to be anything and then in the for loop when he generate the html string he needs with using the rgb string functon with rgb value generator function as a parameter for it. just showcasing that you can use function as arguments on the basis of the ability of doing that (which I think is called a callback function not sure)

this is my example of the way I did it and it worked.

function rgbGenerator() {
    let rgbVal = () => Math.floor(Math.random() * 256) ;
    return `rgb(${rgbVal()}, ${rgbVal()}, ${rgbVal()})`;
}

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

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

I hope I was able to clarify anything at all.

Mark Tripney
Mark Tripney
8,666 Points
Mark Tripney
Mark Tripney
8,666 Points

I suspect what might trip us beginners up here is the function being passed as an argument without parentheses, which wasn't mentioned in the video. When this is done, a mere reference to the function is being passed — we're not calling it at that point, just pointing to it, as it were, for when it does need to be called... And this behaviour, as Abdulsalam Jumah points out, is what defines a callback.