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

Joshua Gage
Joshua Gage
2,619 Points

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

Guill adds value as an argument to the randomRGB function, then replaces the randomValue function inside the parenthesis with said value. Why does this work? How does JS know to call randomValue() when Guill only added value as an argument to randomRGB?

How does JS know that randomValue() and value are the same thing?

2 Answers

Peter Vann
MOD
Peter Vann
Treehouse Moderator 31,439 Points

Hi Joshua!

value is an arbitrary name for the function being passed in (as a parameter) here:

${randomRGB(randomValue)}

The give-away being this line of code:

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

Which tells you that value is some kind of function because it's being used this way:

${value()}. // value is actually the function randomValue, because that is what is actually passed to randomRGB

In this line of code:

html += `div style="background-color: ${randomRGB(randomValue)}">${i}</div>`; // This is how JS makes the connection (how it "knows")

You could just as easily use this:

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

Or even this:

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

Or even this:

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

And it would work the same.

The name of the function variable as passed into the function randomRGB can be anything, as long as it is used consistently.

"value" just happens to be a good descriptive name semantically speaking.

Does that make sense?

I hope that helps.

Stay safe and happy coding!

Peter Vann
MOD
Peter Vann
Treehouse Moderator 31,439 Points

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!