Skip to content
Gallery
Loops en JavaScript
1. What is a Loop?
2. while Loop
3. do while Loop
4. Add One to a Number with the Increment Operator (++)
5. Challenge Loop
6. Bewere of Infinite Loops!
7. Evaluación Loops
8. for loop
9. Dynamically Display HTML with a Loop
10. Exit a Loop
11. The refactor Challenge
12. Challenge Task
Share
Explore

11. The refactor Challenge

Considera el siguiente código:
⁠
javascript-loops.zip
153.6 kB
⁠
⁠
script.js
let html = '';
let red;
let green;
let blue;
let randomRGB;

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

red = Math.floor(Math.random() * 256);
green = Math.floor(Math.random() * 256);
blue = Math.floor(Math.random() * 256);
randomRGB = `rgb( ${red}, ${green}, ${blue} )`;
html += `<div style="background-color: ${randomRGB}">2</div>`;

red = Math.floor(Math.random() * 256);
green = Math.floor(Math.random() * 256);
blue = Math.floor(Math.random() * 256);
randomRGB = `rgb( ${red}, ${green}, ${blue} )`;
html += `<div style="background-color: ${randomRGB}">3</div>`;

red = Math.floor(Math.random() * 256);
green = Math.floor(Math.random() * 256);
blue = Math.floor(Math.random() * 256);
randomRGB = `rgb( ${red}, ${green}, ${blue} )`;
html += `<div style="background-color: ${randomRGB}">4</div>`;

red = Math.floor(Math.random() * 256);
green = Math.floor(Math.random() * 256);
blue = Math.floor(Math.random() * 256);
randomRGB = `rgb( ${red}, ${green}, ${blue} )`;
html += `<div style="background-color: ${randomRGB}">5</div>`;

red = Math.floor(Math.random() * 256);
green = Math.floor(Math.random() * 256);
blue = Math.floor(Math.random() * 256);
randomRGB = `rgb( ${red}, ${green}, ${blue} )`;
html += `<div style="background-color: ${randomRGB}">6</div>`;

red = Math.floor(Math.random() * 256);
green = Math.floor(Math.random() * 256);
blue = Math.floor(Math.random() * 256);
randomRGB = `rgb( ${red}, ${green}, ${blue} )`;
html += `<div style="background-color: ${randomRGB}">7</div>`;

red = Math.floor(Math.random() * 256);
green = Math.floor(Math.random() * 256);
blue = Math.floor(Math.random() * 256);
randomRGB = `rgb( ${red}, ${green}, ${blue} )`;
html += `<div style="background-color: ${randomRGB}">8</div>`;

red = Math.floor(Math.random() * 256);
green = Math.floor(Math.random() * 256);
blue = Math.floor(Math.random() * 256);
randomRGB = `rgb( ${red}, ${green}, ${blue} )`;
html += `<div style="background-color: ${randomRGB}">9</div>`;

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

document.querySelector('main').innerHTML = html;
El cual genera 10 círculos numerados del 1 al 10 con colores aleatorios.
Así:
⁠
Captura de Pantalla 2022-05-24 a la(s) 12.25.18.png
⁠
⁠
El desafío es reescribir ese código para cumplir con el principio DRY

Solución

let html = '';
let red;
let green;
let blue;
let randomRGB;

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);
randomRGB = `rgb( ${red}, ${green}, ${blue} )`;
html += `<div style="background-color: ${randomRGB}">${i}</div>`;

}

document.querySelector('main').innerHTML = html;
Este código se puede mejorar aún más. El desafío será reescribir esta parte que tiene código repetido.
red = Math.floor(Math.random() * 256);
green = Math.floor(Math.random() * 256);
blue = Math.floor(Math.random() * 256);
randomRGB = `rgb( ${red}, ${green}, ${blue}
Primero crearé una función que genere un número aleatorio entre 0 y 256
const random256 = () => Math.floor(Math.random() * 256);

red = random256();
green = random256();
blue = random256();
randomRGB = `rgb( ${red}, ${green}, ${blue}`
Podemos crear una función declarativa que nos entregue un string de la forma rgb( 100, 3, 89)
function randomRGB(){
const color = `rgb( ${random256()}, ${random256()}, ${random256()} )`
return color;
}

Reordenando todo el código nos queda:
let html = '';

const random256 = () => Math.floor(Math.random() * 256); // Entrega un número entre 0 y 256

function randomRGB(){
const color = `rgb( ${random256()}, ${random256()}, ${random256()} )`
return color;
} // Entreg un string con la estructura rgb([random256], [random256], [random256])

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

} // Itera la creación de divs con color random de fondo, enumerados de 1 a 100

document.querySelector('main').innerHTML = html; // Agrega los divs creados en el main del HTML.
Así se ve:
⁠
Captura de Pantalla 2022-05-24 a la(s) 13.23.08.png
⁠
⁠

Una cosa más

La función randomRGB() usa dentro de ella otra función anónima llamada random256() Entonces, es más correcto escribirla así:
function randomRGB(value){
const color = `rgb( ${value()}, ${value()}, ${value()} )`
return color;
}
Y en el for loop
for (let i = 1; i <= 100; i++) {
html += `<div style="background-color: ${randomRGB(random256)}">${i}</div>`;

}
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.