Why does adding value as an argument to the randomRGB function work?

Hi Joshua!

I thought I would simplify things even further, so. you can really see what's going on.

It possible that using a function as an argument/parameter is throwing you off, but it's perfectly common in JavaScript, especially for more advanced usages, such as callback functions and promises.

Consider this:

const square = function(num) {
  return num * num;
}
console.log( square(2) );

Will log 4.

And this:

const square = function(num) {
  return num * num;
}

const quad = function(func, num) {
  return func(num) * func(num); // func is actually the square function and you are, in effect, squaring a square
}

console.log( quad(square, 2) ); // using square() inside quad

Will log 16.

In the first function (square), num = 2 when called in the log statement.

In the seceont function (quad), func = the square function, and num = 2 when called in that log statement.

But you could also do this:

const cube = function(num) {
  return num * num * num;
}

const quad = function(func, num) { // This doesn't change
  return func(num) * func(num); // func is actually the cube function in this case and you are, in effect, squaring a cube
}

console.log( quad(cube, 2) ); // using cube() inside quad (which is really 2**6, or 2 to th 6th power)

Will log 64.

Does that help you see it better?

I hope that helps.

Stay safe and happy coding!

My code worked equally fine prior to passing the value to the argument, so why was this final step necessary? It feels like unneeded extra coding...

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

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

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

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