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

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.