How can I write this block of code in ES6 Arrow Function

Question

I am trying to create a random color generator is there any way to shorten this code and convert into es6 arrow function? Thank you

let html = "";
let rgbColor;

function randomColors(red, green, blue) {
  for (let i = 1; i <= 10; i++) {
    red = Math.floor(Math.random() * 256);
    green = Math.floor(Math.random() * 256);
    blue = Math.floor(Math.random() * 256);
    rgbColor = `rgb(${red},${green},${blue})`;
    html += `<div style="background-color:${rgbColor}"></div>`;
  }

 document.write(html);
}

randomColors()

Answer 1

You can use Array#from and Array#join to generate each color, and the list of colors, and combine everything to a string:

 const randomColors = (count) => Array.from({ length: count }, (_, k) => // create an array of divs with length of count `<div style="background-color: rgb(${ Array.from({ length: 3 }, () => Math.floor(Math.random() * 256)).join() })">${k}</div>` // inside each div create an array of 3 colors, and join them ).join(''); // join the array of divs to one string document.write(randomColors(9)); 

Answer 2

You can do it like this:

let html = "";
let rgbColor;

let randomColors = (red, green, blue) => {
  for (let i = 1; i <= 10; i++) {
    red = Math.floor(Math.random() * 256);
    green = Math.floor(Math.random() * 256);
    blue = Math.floor(Math.random() * 256);
    rgbColor = `rgb(${red},${green},${blue})`;
    html += `<div style="background-color:${rgbColor}"></div>`;
  }
  document.write(html);
}

randomColors()

But this will not shorten this code too much.

Answer 3

This answer is accurate inasmuch as it is a valid representation of your randomColors function that uses arrow functions. However (and as he notes), it alone does not provide much in the way of shortening the code. For that, I would instead propose pulling out a helper function for generating your random color (see the getRandColor function below).

let html = "";
let rgbColor;

const randomColors = (red, green, blue) => {
  const getRandColor = () => Math.floor(Math.random() * 256);

  for (let i = 1; i <= 10; i++) {
    [red, green, blue] = [getRandColor(), getRandColor(), getRandColor()];
    rgbColor = `rgb(${red},${green},${blue})`;
    html += `<div style="background-color:${rgbColor}"></div>`;
  }
  document.write(html);
}

Try the above instead, perhaps.

Answer 4

Shorter isn't always best. This is pretty short, but it can be a bit opaque:

let html = ""

const randomColors=()=>(
    ((rnd)=>(`<div style="background-color: rgb(${rnd()},${rnd()},${rnd()})"></div>`))
    (()=>Math.floor(Math.random()*256))
)

html+=randomColors()
document.write(html)

Answer 5

ES6 arrow functions are used to replace standard anonymous functions without creation new scope that functions usually create. So your function will remain its name and won't be an arrow function.