Cdigo de bucle

Por qu son tiles los bucles?

Los bucles se tratan de hacer lo mismo una y otra vez. A menudo, el cdigo ser ligeramente diferente cada vez que dure el bucle, o se ejecutar el mismo cdigo pero con diferentes variables.

Ejemplo de cdigo de bucles

Supongamos que queremos dibujar 100 crculos aleatorios en un elemento <canvas> (pulse el botn Actualizar para ejecutar el ejemplo una y otra vez para ver diferentes conjuntos aleatorios):

<button>Actualizar</button> <canvas></canvas>

html {
  width: 100%;
  height: inherit;
  background: #ddd;
}

canvas {
  display: block;
}

body {
  margin: 0;
}

button {
  position: absolute;
  top: 5px;
  left: 5px;
}

Este es el cdigo JavaScript que implementa este ejemplo:

const btn = document.querySelector("button");
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

document.addEventListener("DOMContentLoaded", () => {
  canvas.width = document.documentElement.clientWidth;
  canvas.height = document.documentElement.clientHeight;
});

function random(number) {
  return Math.floor(Math.random() * number);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = "rgba(255,0,0,0.5)";
    ctx.arc(
      random(canvas.width),
      random(canvas.height),
      random(50),
      0,
      2 * Math.PI,
    );
    ctx.fill();
  }
}

btn.addEventListener("click", draw);

Con y sin bucles

No tienes que entender todo el cdigo por ahora, pero veamos la parte del cdigo que realmente dibuja los 100 crculos:

for (let i = 0; i < 100; i++) {
  ctx.beginPath();
  ctx.fillStyle = "rgba(255,0,0,0.5)";
  ctx.arc(
    random(canvas.width),
    random(canvas.height),
    random(50),
    0,
    2 * Math.PI,
  );
  ctx.fill();
}

• random(x), definido anteriormente en el cdigo, devuelve un nmero entero entre 0 y x-1.

Deberas tener la idea bsica: estamos usando un bucle para ejecutar 100 iteraciones de este cdigo, cada una de las cuales dibuja un crculo en una posicin aleatoria en la pgina. La cantidad de cdigo necesaria sera la misma si estuviramos dibujando 100 crculos, 1000 o 10.000. Solo un nmero tiene que cambiar.

Si no estuviramos usando un bucle aqu, tendramos que repetir el siguiente cdigo para cada crculo que quisiramos dibujar:

ctx.beginPath();
ctx.fillStyle = "rgba(255,0,0,0.5)";
ctx.arc(
  random(canvas.width),
  random(canvas.height),
  random(50),
  0,
  2 * Math.PI,
);
ctx.fill();

Esto sera muy aburrido y difcil de mantener.

Recorriendo una coleccin

La mayora de las veces, cuando usas un bucle, tendrs una coleccin de artculos y querrs hacer algo con cada artculo.

Un tipo de coleccin es el Arreglo, que conocimos en el captulo de Arreglos de este curso. Pero tambin hay otras colecciones en JavaScript, como Set y Map.

El bucle for...of

La herramienta bsica para recorrer una coleccin es el bucle for...of:

const cats = ["Leopardo", "Serval", "Jaguar", "Tigre", "Caracal", "Len"];

for (const cat of cats) {
  console.log(cat);
}

En este ejemplo, for (const cat of cats) dice:

1. Dada la coleccin cats, consigue el primer artculo de la coleccin.
2. Asignarlo a la variable cat y luego ejecutar el cdigo entre las llaves {}.
3. Obtn el siguiente elemento y repite (2) hasta que hayas llegado al final de la coleccin.

map() y filter()

JavaScript tambin tiene bucles ms especializados para colecciones, y mencionaremos dos de ellos aqu.

Puede usar map() para hacer algo con cada elemento de una coleccin y crear una nueva coleccin que contenga los elementos modificados:

function toUpper(string) {
  return string.toUpperCase();
}

const cats = ["Leopardo", "Serval", "Jaguar", "Tigre", "Caracal", "Len"];

const upperCats = cats.map(toUpper);

console.log(upperCats);
// [ "LEOPARDO", "SERVAL", "JAGUAR", "TIGRE", "CARACAL", "LEN" ]

Aqu pasamos una funcin a cats.map(), y map() llama a la funcin una vez por cada elemento de la matriz, pasando el elemento. A continuacin, aade el valor devuelto de cada llamada de funcin a un nuevo arreglo y, finalmente, devuelve el nuevo arreglo. En este caso, la funcin que proporcionamos convierte el elemento en maysculas, por lo que la matriz resultante contiene todos nuestros gatos en maysculas:

[ "LEOPARDO", "SERVAL", "JAGUAR", "TIGRE", "CARACAL", "LEN" ]

Puede usar filter() para probar cada elemento de una coleccin y crear una nueva coleccin que contenga solo elementos que coincidan:

function lCat(cat) {
  return cat.startsWith("L");
}

const cats = ["Leopardo", "Serval", "Jaguar", "Tigre", "Caracal", "Len"];

const filtered = cats.filter(lCat);

console.log(filtrado);
// [ "Leopardo", "Len" ]

Esto se parece mucho a map(), excepto que la funcin que pasamos devuelve un booleano: si devuelve true, entonces el elemento se incluye en el nuevo arreglo. Nuestra funcin prueba que el elemento comienza con la letra "L", por lo que el resultado es una matriz que contiene solo gatos cuyos nombres comienzan con "L":

[ "Leopardo", "Len" ]

Tenga en cuenta que map() y filter() se usan a menudo con expresiones de funciones, que aprenderemos en el mdulo Functions. Usando expresiones de funcin podramos reescribir el ejemplo anterior para que sea mucho ms compacto:

const cats = ["Leopardo", "Serval", "Jaguar", "Tigre", "Caracal", "Len"];

const filter = cats.filter((cat) => cat.startsWith("L"));
console.log(filtrado);
// [ "Leopardo", "Len" ]

El bucle estndar for

En el ejemplo anterior de "crculos de dibujo", no tiene una coleccin de elementos para recorrer: realmente solo desea ejecutar el mismo cdigo 100 veces. En un caso como ese, debes usar el bucle for. Tiene la siguiente sintaxis:

for (inicializador; condicin; expresin-final) {
  // cdigo a ejecutar
}

Aqu tenemos:

1. La palabra clave for, seguida de algunos parntesis.

2. Dentro de los parntesis tenemos tres tems, separados por punto y coma:

   1. Un inicializador: generalmente es una variable establecida en un nmero, que se incrementa para contar el nmero de veces que se ha ejecutado el bucle. Tambin se denomina a veces variable de contador.
   2. Una condicin: define cundo el bucle debe dejar de funcionar. Esta es generalmente una expresin que presenta un operador de comparacin, una prueba para ver si se ha cumplido la condicin de salida.
   3. Una expresin-final: siempre se evala (o ejecuta) cada vez que el bucle ha pasado por una iteracin completa. Por lo general, sirve para incrementar (o en algunos casos disminuir) la variable contadora, para acercarla al punto en que la condicin ya no es true.

3. Algunas llaves que contienen un bloque de cdigo: este cdigo se ejecutar cada vez que el bucle se repita.

Clculo de cuadrados

Veamos un ejemplo real para que podamos visualizar lo que estos hacen con mayor claridad.

<button id="calculate">Calcular</button>
<button id="clear">Borrar</button>
<pre id="results"></pre>

const results = document.querySelector("#results");

function calculate() {
  for (let i = 1; i < 10; i++) {
    const newResult = `${i} x ${i} = ${i * i}`;
    results.textContent += `${newResult}\n`;
  }
  results.textContent += "\nFinalizado!";
}

const calculateBtn = document.querySelector("#calculate");
const clearBtn = document.querySelector("#clear");

calculateBtn.addEventListener("click", calculate);
clearBtn.addEventListener("click", () => (results.textContent = ""));

Esto nos da el siguiente resultado:

Este cdigo calcula los cuadrados de los nmeros del 1 al 9 y escribe el resultado. El ncleo del cdigo es el bucle for que realiza el clculo.

Desglosemos la lnea for (let i = 1; i < 10; i++) en sus tres partes:

1. let i = 1: la variable del contador, i, comienza en 1. Tenga en cuenta que tenemos que usar let para el contador, porque lo estamos reasignando cada vez que damos la vuelta al bucle.
2. i < 10: sigue dando la vuelta al bucle mientras i sea menor que 10.
3. i++: aade uno a i cada vez que recorras el bucle.

Dentro del bucle, calculamos el cuadrado del valor actual de i, es decir: i * i. Creamos una cadena que expresa el clculo que realizamos y el resultado, y aadimos esta cadena al texto de salida. Tambin aadimos \n, por lo que la siguiente cadena que aadamos comenzar en una nueva lnea. De manera que:

1. Durante la primera ejecucin, i = 1, por lo que aadiremos 1 x 1 = 1.
2. Durante la segunda ejecucin, i = 2, por lo que aadiremos 2 x 2 = 4.
3. Y as sucesivamente...
4. Cuando i sea igual a 10, dejaremos de ejecutar el bucle y pasaremos directamente al siguiente cdigo debajo del bucle, imprimiendo el mensaje Finalizado! en una nueva lnea.

Recorriendo colecciones con un bucle for

Puede usar un bucle for para iterar a travs de una coleccin, en lugar de un bucle for...of.

Echemos un vistazo de nuevo a nuestro ejemplo anterior "for...of":

const cats = ["Leopardo", "Serval", "Jaguar", "Tigre", "Caracal", "Len"];

for (const cat of cats) {
  console.log(cat);
}

Podramos reescribir ese cdigo as:

const cats = ["Leopardo", "Serval", "Jaguar", "Tigre", "Caracal", "Len"];

for (let i = 0; i < cats.length; i++) {
  console.log(cats[i]);
}

En este bucle, comenzamos i en 0 y nos detenemos cuando i alcanza la longitud del arreglo. Luego, dentro del bucle, estamos usando i para acceder a cada elemento del arreglo a su vez.

Esto funciona muy bien, y en las primeras versiones de JavaScript, for...of no exista, por lo que esta era la forma estndar de iterar a travs de un arreglo. Sin embargo, ofrece ms posibilidades de introducir errores en tu cdigo. Por ejemplo:

• puede comenzar i en 1, olvidando que el primer ndice del arreglo es cero, no 1.
• puede detenerse en i <= cats.length, olvidando que el ltimo ndice de matriz est en length - 1.

Por razones como esta, generalmente es mejor usar for...of si puedes.

A veces todava necesitas usar un bucle for para iterar a travs de un arreglo. Por ejemplo, en el siguiente cdigo queremos registrar un mensaje que enumere a nuestros gatos:

const cats = ["Pete", "Biggles", "Jasmine"];

let myFavoriteCats = "Mis gatos se llaman ";

for (const cat of cats) {
  myFavoriteCats += `${cat}, `;
}

console.log(myFavoriteCats); // "Mis gatos se llaman Pete, Biggles, Jasmine, "

La oracin de salida final no est muy bien formada:

Mis gatos se llaman Pete, Biggles, Jasmine,

Preferiramos que manejara al ltimo gato de manera diferente, as:

Mis gatos se llaman Pete, Biggles y Jasmine.

Pero para hacer esto necesitamos saber cundo estamos en la iteracin final del bucle, y para hacerlo podemos usar un bucle for y examinar el valor de i:

const cats = ["Pete", "Biggles", "Jasmine"];

let myFavoriteCats = "Mis gatos se llaman ";

for (let i = 0; i < cats.length; i++) {
  if (i === cats.length - 1) {
    // Estamos al final del arreglo
    myFavoriteCats += `y ${cats[i]}.`;
  } else {
    myFavoriteCats += `${cats[i]}, `;
  }
}

console.log(myFavoriteCats); // "Mis gatos se llaman Pete, Biggles y Jasmine."

Saliendo de bucles con break

Si desea salir de un bucle antes de que se hayan completado todas las iteraciones, puede usar la instruccin break. Ya vimos esto en el artculo anterior cuando analizamos las sentencias switch: cuando se cumple un caso en una sentencia switch que coincide con la expresin de entrada, la sentencia break sale inmediatamente de la sentencia switch y pasa al cdigo despus de ella.

Es lo mismo con los bucles: una instruccin break saldr inmediatamente del bucle y har que el navegador pase a cualquier cdigo que lo siga.

Digamos que queramos buscar a travs de una serie de contactos y nmeros de telfono y devolver solo el nmero que queramos encontrar. Primero, un HTML simple: un <input> de texto que nos permite ingresar un nombre para buscar, un elemento <button> para enviar una bsqueda y un elemento <p> para mostrar los resultados en:

<label for="search">Buscar por nombre de contacto: </label>
<input id="search" type="text" />
<button>Buscar</button>

<p></p>

Ahora pasemos a JavaScript:

const contacts = [
  "Chris:2232322",
  "Sarah:3453456",
  "Bill:7654322",
  "Mary:9998769",
  "Dianne:9384975",
];
const para = document.querySelector("p");
const input = document.querySelector("input");
const btn = document.querySelector("button");

btn.addEventListener("click", () => {
  const searchName = input.value.toLowerCase();
  input.value = "";
  input.focus();
  para.textContent = "";
  for (const contact of contacts) {
    const splitContact = contact.split(":");
    if (splitContact[0].toLowerCase() === searchName) {
      para.textContent = `El nmero de ${splitContact[0]} es ${splitContact[1]}.`;
      break;
    }
  }
  if (para.textContent === "") {
    para.textContent = "Contacto no encontrado.";
  }
});

1. En primer lugar, tenemos algunas definiciones de variables: tenemos una variedad de informacin de contacto, y cada elemento es una cadena que contiene un nombre y un nmero de telfono separados por dos puntos.

2. A continuacin, adjuntamos un detector de eventos al botn (btn) para que cuando se pulse se ejecute algn cdigo para realizar la bsqueda y devolver los resultados.

3. Almacenamos el valor introducido en la entrada de texto en una variable llamada searchName, antes de vaciar la entrada de texto y volver a enfocarla, listos para la siguiente bsqueda. Tenga en cuenta que tambin ejecutamos el mtodo toLowerCase() en la cadena, de modo que las bsquedas no distingan entre maysculas y minsculas.

4. Ahora pasemos a la parte interesante, el bucle for...of:

   1. Dentro del bucle, primero dividimos el contacto actual en el carcter de dos puntos y almacenamos los dos valores resultantes en un arreglo llamado splitContact.
   2. Luego usamos una instruccin condicional para probar si splitContact [0] (el nombre del contacto, nuevamente en minsculas con toLowerCase()) es igual al searchName ingresado. Si es as, introducimos una cadena en el prrafo para informar cul es el nmero del contacto y usamos break para finalizar el bucle.

5. Despus del bucle, verificamos si configuramos un contacto y, de lo contrario, configuramos el texto del prrafo como "Contacto no encontrado".

Omitir iteraciones con continue

La instruccin continue funciona de manera similar a break, pero en lugar de salir del bucle por completo, salta a la siguiente iteracin del bucle. Veamos otro ejemplo que toma un nmero como entrada y devuelve solo los nmeros que son cuadrados de enteros (nmeros enteros).

El HTML es bsicamente el mismo que el ltimo ejemplo: una entrada numrica simple y un prrafo para la salida.

<label for="number">Introducir nmero: </label>
<input id="number" type="number" />
<button>Generar cuadrados enteros</button>

<p>Resultado:</p>

El JavaScript tambin es casi el mismo, aunque el bucle en s es un poco diferente:

const para = document.querySelector("p");
const input = document.querySelector("input");
const btn = document.querySelector("button");

btn.addEventListener("click", () => {
  para.textContent = "Resultado: ";
  const num = input.value;
  input.value = "";
  input.focus();
  for (let i = 1; i <= num; i++) {
    let sqRoot = Math.sqrt(i);
    if (Math.floor(sqRoot) !== sqRoot) {
      continue;
    }
    para.textContent += `${i} `;
  }
});

Este es el resultado:

1. En este caso, la entrada debe ser un nmero (num). Al bucle for se le da un contador que comienza en 1 (ya que no estamos interesados en 0 en este caso), una condicin de salida que dice que el bucle se detendr cuando el contador se vuelva ms grande que la entrada num, y un iterador que suma 1 al contador cada vez.
2. Dentro del bucle, encontramos la raz cuadrada de cada nmero usando Math.sqrt(i), luego verificamos si la raz cuadrada es un entero probando si es igual a s misma cuando se ha redondeado al entero ms cercano (esto es lo que Math.floor() hace al nmero que se pasa).
3. Si la raz cuadrada y la raz cuadrada redondeada hacia abajo no son iguales entre s (!==), significa que la raz cuadrada no es un nmero entero, por lo que no nos interesa. En tal caso, usamos la instruccin continue para saltar a la siguiente iteracin de bucle sin registrar el nmero en ninguna parte.
4. Si la raz cuadrada es un nmero entero, omitimos por completo el bloque if, por lo que no se ejecuta la instruccin continue; en su lugar, concatenamos el valor i actual ms un espacio al final del contenido del prrafo.

while y do...while

for no es el nico tipo de bucle disponible en JavaScript. En realidad, hay muchos otros y, aunque no es necesario que entiendas todos estos ahora, vale la pena echar un vistazo a la estructura de un par de otros para que puedas reconocer las mismas caractersticas en el trabajo de una manera ligeramente diferente.

Primero, echemos un vistazo al bucle while. La sintaxis de este bucle se ve as:

inicializador
while(condicin) {
  // cdigo a ejecutar

  expresin-final
}

Esto funciona de una manera muy similar al bucle for, excepto que la variable inicializadora se establece antes del bucle, y la expresin final se incluye dentro del bucle despus del cdigo a ejecutar, en lugar de que estos dos elementos se incluyan dentro de los parntesis. La condicin se incluye dentro de los parntesis, que estn precedidos por la palabra clave while en lugar de for.

Los mismos tres elementos todava estn presentes, y todava estn definidos en el mismo orden en que estn en el bucle for. Esto se debe a que debe tener un inicializador definido antes de poder verificar si la condicin es verdadera o no. La expresin final se ejecuta despus de que se haya ejecutado el cdigo dentro del bucle (se ha completado una iteracin), lo que solo ocurrir si la condicin sigue siendo cierta.

Echemos un vistazo de nuevo a nuestro ejemplo de lista de gatos, pero reescrito para usar un bucle while:

const cats = ["Pete", "Biggles", "Jasmine"];

let myFavoriteCats = "Mis gatos se llaman ";

let i = 0;

while (i < cats.length) {
  if (i === cats.length - 1) {
    myFavoriteCats += `y ${cats[i]}.`;
  } else {
    myFavoriteCats += `${cats[i]}, `;
  }

  i++;
}

console.log(myFavoriteCats); // "Mis gatos se llaman Pete, Biggles y Jasmine."

El bucle do...while es muy similar, pero proporciona una variacin en la estructura while:

inicializador
do {
  // cdigo a ejecutar

  expresin-final
} while (condicin)

En este caso, el inicializador vuelve a aparecer primero, antes de que comience el bucle. La palabra clave precede directamente a las llaves que contienen el cdigo a ejecutar y la expresin final.

La principal diferencia entre un bucle do...while y un bucle while es que el cdigo dentro de un bucle do...while siempre se ejecuta al menos una vez. Esto se debe a que la condicin viene despus del cdigo dentro del bucle. As que siempre ejecutamos ese cdigo, luego verificamos si necesitamos ejecutarlo de nuevo. En los bucles while y for, la comprobacin es lo primero, por lo que es posible que el cdigo nunca se ejecute.

Volvamos a escribir nuestro ejemplo de listado de gatos para usar un bucle de "do...while":

const cats = ["Pete", "Biggles", "Jasmine"];

let myFavoriteCats = "Mis gatos se llaman ";

let i = 0;

do {
  if (i === cats.length - 1) {
    myFavoriteCats += `y ${cats[i]}.`;
  } else {
    myFavoriteCats += `${cats[i]}, `;
  }

  i++;
} while (i < cats.length);

console.log(myFavoriteCats); // "Mis gatos se llaman Pete, Biggles y Jasmine."

Aprendizaje activo: iniciar cuenta regresiva

En este ejercicio, queremos que imprima una cuenta regresiva de lanzamiento simple para la caja de salida, desde 10 hasta Blastoff. En concreto, queremos:

• Bucle de 10 a 0. Te hemos proporcionado un inicializador: let i = 10;.

• Para cada iteracin, cree un nuevo prrafo y adalo a la salida <div>, que hemos seleccionado usando const output = document.querySelector('.output');. En los comentarios, le proporcionamos tres lneas de cdigo que deben usarse en algn lugar dentro del bucle:

  • const para = document.createElement('p');: crea un nuevo prrafo.
  • output.appendChild(para);: aade el prrafo a la salida <div>.
  • para.textContent =: hace que el texto dentro del prrafo sea igual a lo que pongas en el lado derecho, despus del signo igual.

• Los diferentes nmeros de iteracin requieren que se coloque un texto diferente en el prrafo para esa iteracin (necesitars una instruccin condicional y varias lneas de para.textContent =):

  • Si el nmero es 10, imprima "Cuenta regresiva 10" en el prrafo.
  • Si el nmero es 0, imprima "Blast off!" en el prrafo.
  • Para cualquier otro nmero, imprime solo el nmero en el prrafo.

• Recuerda incluir un iterador! Sin embargo, en este ejemplo estamos contando hacia atrs despus de cada iteracin, no hacia arriba, por lo que no quieres i++: cmo iteras hacia abajo?

Si comete un error, siempre puede restablecer el ejemplo con el botn "Restablecer". Si te quedas realmente atascado, pulsa "Mostrar solucin" para ver una solucin.

<h2>Salida en vivo</h2>
<div class="output" ></div>

<h2>Cdigo editable</h2>
<p class="a11y-label">
  Pulse Esc para alejar el foco del rea de cdigo (Tab inserta un carcter de
  tabulacin).
</p>
<textarea id="code" class="playable-code" >
let output = document.querySelector('.output');
output.innerHTML = '';

// let i = 10;

// const para = document.createElement('p');
// para.textContent = ;
// output.appendChild(para);
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Restablecer" />
  <input id="solution" type="button" value="Mostrar solucin" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
let code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = jsSolution;
  solution.value = "Mostrar solucin";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Mostrar solucin") {
    textarea.value = solutionEntry;
    solution.value = "Ocultar solucin";
  } else {
    textarea.value = userEntry;
    solution.value = "Mostrar solucin";
  }
  updateCode();
});

let jsSolution = `const output = document.querySelector('.output');
output.innerHTML = '';

let i = 10;

while (i >= 0) {
  const para = document.createElement('p');
  if (i === 10) {
    paragraphtextContent = \`Cuenta atrs \${i}\`;
  } else if (i === 0) {
    para.textContent = 'Blast off!';
  } else {
    para.textContent = i;
  }

  output.appendChild(para);

  i--;
}`;

let solutionEntry = jsSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// detener la tabulacin de la tecla tabulacin fuera del rea de texto y
// hacer que escriba una tabulacin en la posicin del cursor en su lugar

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;
  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );

  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Actualizar el userCode guardado cada vez que el usuario actualice el cdigo de rea de texto

textarea.onkeyup = () => {
  // Solo queremos guardar el estado cuando se muestra el cdigo de usuario,
  // no la solucin, para que la solucin no se guarde sobre el cdigo de usuario
  if (solution.value === "Mostrar solucin") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Aprendizaje activo: rellenar una lista de invitados

En este ejercicio, queremos que tomes una lista de nombres almacenados en un arreglo y los pongas en una lista de invitados. Pero no es tan fcil: no queremos dejar entrar a Phil y Lola porque son codiciosos y groseros, y siempre comen toda la comida! Tenemos dos listas, una para que los huspedes la admitan y otra para que los huspedes la rechacen.

En concreto, queremos:

• Escribe un bucle que itere a travs del arreglo people.
• Durante cada iteracin de bucle, compruebe si el elemento del arreglo actual es igual a "Phil" o "Lola" utilizando una instruccin condicional:
  • Si es as, concatene el elemento del arreglo al final de textContent del prrafo refused, seguido de una coma y un espacio.
  • Si no es as, concatene el elemento del arreglo hasta el final del textContent del prrafo admitted, seguido de una coma y un espacio.

Ya te hemos proporcionado:

• refused.textContent +=: los inicios de una lnea que concatenar algo al final de refused.textContent.
• admitted.textContent +=; los inicios de una lnea que concatenar algo al final de admitted.textContent.

Pregunta de bonificacin adicional: despus de completar las tareas anteriores con xito, te quedarn dos listas de nombres, separadas por comas, pero estarn desordenadas: habr una coma al final de cada una. Puedes averiguar cmo escribir lneas que corten la ltima coma en cada caso y aadir un punto al final? Consulta el artculo Mtodos de cadenas tiles para obtener ayuda.

Si comete un error, siempre puede restablecer el ejemplo con el botn "Restablecer". Si te quedas realmente atascado, pulsa "Mostrar solucin" para ver una solucin.

<h2>Salida en vivo</h2>
<div class="output" >
  <p class="admitted">Admitir:</p>
  <p class="refused">Rechazar:</p>
</div>

<h2>Cdigo editable</h2>
<p class="a11y-label">
  Pulse Esc para alejar el foco del rea de cdigo (Tab inserta un carcter de
  tabulacin).
</p>
<textarea id="code" class="playable-code" >
const people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];

const admitted = document.querySelector('.admitted');
const refused = document.querySelector('.refused');
admitted.textContent = 'Admitir: ';
refused.textContent = 'Rechazar: ';

// El bucle comienza aqu

// refused.textContent += ;
// admitted.textContent += ;

</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Restablecer" />
  <input id="solution" type="button" value="Mostrar solucin" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
let code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  eval(textarea.value);
}

reset.addEventListener("click", function () {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = jsSolution;
  solution.value = "Mostrar solucin";
  updateCode();
});

solution.addEventListener("click", function () {
  if (solution.value === "Mostrar solucin") {
    textarea.value = solutionEntry;
    solution.value = "Ocultar solucin";
  } else {
    textarea.value = userEntry;
    solution.value = "Mostrar solucin";
  }
  updateCode();
});

const jsSolution = `
const people = ['Chris', 'Anne', 'Colin', 'Terri', 'Phil', 'Lola', 'Sam', 'Kay', 'Bruce'];

const admitted = document.querySelector('.admitted');
const refused = document.querySelector('.refused');

admitted.textContent = 'Admitir: ';
refused.textContent = 'Rechazar: ';

for (const person of people) {
  if (person === 'Phil' || person === 'Lola') {
    refused.textContent += \`\${person}, \`;
  } else {
    admitted.textContent += \`\${person}, \`;
  }
}

refused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + '.';
admitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + '.';`;

let solutionEntry = jsSolution;

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// detener la tabulacin de la tecla tabulacin fuera del rea de texto y
// hacer que escriba una tabulacin en la posicin del cursor en su lugar

textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.keyCode === 27) {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;
  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );

  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Actualizar el userCode guardado cada vez que el usuario actualice el cdigo de rea de texto

textarea.onkeyup = () => {
  // Solo queremos guardar el estado cuando se muestra el cdigo de usuario,
  // no la solucin, para que la solucin no se guarde sobre el cdigo de usuario
  if (solution.value === "Mostrar solucin") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Qu tipo de bucle debes usar?

Si est iterando a travs de un arreglo o algn otro objeto que lo admita, y no necesita acceder a la posicin de ndice de cada elemento, entonces for...of es la mejor opcin. Es ms fcil de leer y hay menos para equivocarse.

Para otros usos, los bucles for, while y do...while son en gran medida intercambiables. Todos se pueden usar para resolver los mismos problemas, y cul uses depender en gran medida de tus preferencias personales: cul te resulta ms fcil de recordar o ms intuitivo. Recomendaramos for, al menos para empezar, ya que es probablemente el ms fcil para recordar todo: el inicializador, la condicin y la expresin final tienen que ir perfectamente entre parntesis, por lo que es fcil ver dnde estn y comprobar que no te los ests perdiendo.

Echmosles un vistazo a todos de nuevo.

Primero for...of:

for (const elemento of arreglo) {
  // cdigo a ejecutar
}

for:

for (inicializador; condicin; expresin-final) {
  // cdigo a ejecutar
}

while:

inicializador
while(condicin) {
  // cdigo a ejecutar

  expresin-final
}

y finalmente do...while:

inicializador
do {
  // cdigo a ejecutar

  expresin-final
} while (condicin)

Pon a prueba tus habilidades

Has llegado al final de este artculo, pero puedes recordar la informacin ms importante? Puedes encontrar algunas pruebas adicionales para verificar que has conservado esta informacin antes de continuar. Consulta Pon a prueba tus habilidades: bucles.

Conclusin

Este artculo te ha revelado los conceptos bsicos que hay detrs y las diferentes opciones disponibles al hacer bucles de cdigo en JavaScript. Ahora deberas tener claro por qu los bucles son un buen mecanismo para lidiar con el cdigo repetitivo y tener ganas de usarlos en tus propios ejemplos!

Si hay algo que no entendiste, vuelve a leer el artculo o ponte en contacto con nosotros para pedir ayuda.

Vease tambin

• Bucles e iteracin en detalle
• for...of referencia
• Referencia de la declaracin for
• Referencias de while y do...while
• Referencias de break y continue

• Anterior
• Overview: Elementos bsicos de JavaScript
• Siguiente