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

Karla Pozzi
seal-mask
.a{fill-rule:evenodd;}techdegree
Karla Pozzi
Full Stack JavaScript Techdegree Student 4,317 Points

Sharing my solution (would love feedback!)

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

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

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

Not the same as the instructors but it works. 🤷‍♀️

2 Answers

Peter Vann
MOD
Peter Vann
Treehouse Moderator 31,785 Points

Hi Karla!

Yes, your code works just fine and in this context I think is just as efficient as Guil's.

Keep in mind that the primary reason to turn small blocks of code into functions is for reusability and to keep your code as DRY* as possible.

*(Don't Repeat Yourself: https://dzone.com/articles/is-your-code-dry-or-wet)

I think Guil's example approach would only be the better way to go if later in the code you needed many more randomRGB color values (it would ultimately be just slightly less typing, overall). Does that make sense?

Also, on the other hand, I think sometimes refactoring can go too far and make code difficult to understand. For example, in some complex platforms, such as WordPress, the code is so refactored and modular that locating where a function is declared can be difficult, if not impossible, and can make debugging and customing the code nightmarish!?!

I hope that helps.

Stay safe and happy coding!

Mohandas Towne
Mohandas Towne
3,654 Points

This is precisely what I did. Was very validating to see that you posted this example, thanks!