Bucles while y bucles for. Curso de JavaScript de la parte 5 de principiante a avanzado en 10 publicaciones de blog

Esta es la parte 5 de la serie de publicaciones de blog de JavaScript que lo llevará desde principiante hasta avanzado. Al final de esta serie, sabrá todos los conceptos básicos que necesita saber para comenzar a codificar en JavaScript. Sin más preámbulos, comencemos con el quinto tutorial.

Bucles while y bucles for – tabla de contenidos:

1. Estructuras de control (continuación)
2. Mientras que los bucles
3. Para bucles

Este tutorial asume que ha seguido el cuarto tutorial de la serie, tanto en términos de configuración como de conocimiento. Continuaremos con la configuración que tenemos en el cuarto tutorial, por lo que si lo cerró por algún motivo, puede consultar el tutorial anterior para obtener instrucciones completas paso a paso. Como resultado tendremos abierto nuestro Google Chrome, y más concretamente la parte de snippets abierta para escribir y ejecutar nuestro código. Si tiene eso listo, está listo para continuar con este tutorial.

Estructuras de control (continuación)

En el tutorial anterior hemos visto el uso de if, else if y else para controlar el flujo de nuestro código. Es genial que ahora tengamos más control sobre nuestro código, pero si te fijas, solo podemos ejecutar todo una vez. Por ejemplo, si quisieras decir "¡Hola, ahí!" diez veces, necesitaría escribir 10 líneas diferentes de código que digan exactamente lo mismo. ¿No hay una mejor manera de lograr esto? ¿Realmente necesitas repetirte en el código tantas veces? La respuesta es no, en absoluto.

Como programador, desea que su código esté SECO. DRY aquí significa Don't Repeat Yourself. Sí, es posible que de vez en cuando repita algunas partes del código si tiene sentido en ese momento, pero como objetivo general, debe aspirar a tener un código SECO. De esta manera, la mayoría de las veces tendrá un código más limpio y con menos posibilidades de errores.

Para no repetirnos en el código, utilizaremos bucles. Más específicamente, "bucles while" y "bucles for". Comencemos con los bucles while y de qué se trata.

Mientras que los bucles

Los bucles while siguen una lógica simple. Y va como sigue:

Ejecuta el código dado dentro del paréntesis, mientras la condición sea verdadera.

Dicho esto, también debemos tener cuidado con el código que escribimos con bucles while, porque si la condición nunca se vuelve falsa, ese código dentro del paréntesis se ejecutará para siempre a menos que se detenga la ejecución. Es por eso que querremos implementar algún tipo de cambio que desencadene la detención del bucle por qué. Veámoslo con un ejemplo.

let hungry = true;
while (hungry) {
    alert("Eat food");
    hungry = false;
}

En el ejemplo anterior, ejecutaremos el código de alerta que nos dice que comamos solo una vez. Esto se debe a que al principio configuramos el hambre en verdadero, por lo que comenzaremos a ejecutar el código dentro del ciclo while. Pero al ejecutar el código, una línea estableció el estado hambriento en falso. Entonces, después de la primera ejecución, ahora tenemos el estado hambriento establecido en falso, y en esto sabemos que el código while no se ejecutará nuevamente. Ahora veamos otro ejemplo donde el código se ejecuta varias veces.

let targetNumber = 10;
let currentNumber = 0;
while (currentNumber < targetNumber) {
    alert("Hello User!");
    currentNumber++;
}

¿Qué crees que pasará con este código? ¿Van a mostrar al usuario alguna alerta? Si es así, ¿cuántas alertas vamos a mostrar al usuario?

Si adivinó que alertaremos al usuario 10 veces en total, ¡entonces acertó! Si no, piénsalo de nuevo y mira si lo consigues esta vez. Lo que hacemos en este código es comenzar con un número actual para rastrear cuántas veces hemos mostrado la alerta al usuario. Cada vez que mostremos la alerta al usuario también la incrementaremos en uno. El símbolo ++, si recuerdas, se usa para incrementar un número dado en uno. Al principio, aún no hemos mostrado al usuario ninguna alerta, por lo que comenzamos con cero y continuamos hasta llegar a un número de visualización de 10.

Una cosa a la que debe prestar atención aquí es que debido a que estamos buscando un número menor que 10, el código dentro del paréntesis no se ejecutará cuando el número actual llegue a 10, ya que ya no cumple la condición de ser menor que el número objetivo.

Aunque aumentamos el número en uno al final de cada ciclo, no existe una regla que diga que solo puede aumentarlo o disminuirlo dentro de un ciclo while. Y esta es una gran ventaja de usar bucles while. Se usan en lugares donde no necesariamente sabe cuántas veces va a ejecutar el código. Por ejemplo, puede crear un juego y puede mantener a un jugador en el juego, siempre que no pierda el juego. Durante esta sesión de juego, el usuario puede ganar puntos o perder puntos por un período de tiempo indeterminado y puede finalizar el juego cuando bajan de cierto punto, como cero.

De vez en cuando, también puede haber momentos en los que desee ejecutar el código dentro del paréntesis al menos una vez dentro de un ciclo while. Por ejemplo, imagine un escenario en el que primero toma un refrigerio y ellos deciden si tiene hambre o no. Sabes que quieres comer algo, pero no necesariamente lo sabes por mucho tiempo. En casos como estos, podemos usar un tipo de bucle while llamado "bucles do while".

let reallyHungry = false;
do {
    alert("Eat some food.");
} while (reallyHungry);

En este caso, aunque no teníamos mucha hambre, primero comimos algo y luego decidimos si comíamos más o no. Esto es algo que podemos hacer con los bucles do while. Tenga en cuenta que debido a que no tenemos un mecanismo para decirle a la computadora cuando estamos llenos, este código querría ejecutarse para siempre si convirtiéramos a veryHungry en verdadero. Es por eso que todavía es obligatorio implementar algún tipo de mecanismo de detención dentro de nuestro bloque de código. Esto puede ser cualquier cosa, desde darle un nivel al hambre para que podamos aumentarlo o configurarlo como "verdadero" en algún lugar de nuestro código.

El ciclo while es especialmente bueno para condiciones en las que no sabemos cuántas veces tenemos que ejecutar nuestro código. Pero hay muchas veces en las que sabemos exactamente cuántas veces debemos ejecutar un código. Para esos momentos, generalmente usaremos "For Loops".

Para bucles

Los bucles for son muy similares a los bucles while pero tienen ciertas características que los hacen preferibles en muchos casos. Los bucles for introducen ciertos límites que debe establecer desde el principio y estos límites pueden hacer que su código sea más seguro de ejecutar. Con bucles for le decimos a la computadora exactamente cuántas veces queremos ejecutar un código. De esta manera sabemos que nuestro código no se convertirá en un bucle infinito que quiere ejecutarse para siempre.

// greet the user 5 times, or 5 users once!
for (let numberGreeted = 0; numberGreeted < 5; numberGreeted++){
    alert("Hello User!");
}

En el código anterior, saludamos al usuario 5 veces. Si observa más de cerca el ciclo for, puede ver que es casi un ciclo while especializado que está más definido y es más seguro de ejecutar. Por ejemplo, con un ciclo while podemos lograr exactamente el mismo resultado con el siguiente código:

let numberGreeted = 0;
while (numberGreeted < 5) {
    alert("Hello User!");
    numberGreeted++;
}

Como puede ver, con un ciclo for casi llevamos algunas partes del código dentro del paréntesis que define las condiciones del ciclo for. Para que sepamos que las variables que queremos usar definitivamente existen, sabemos que el valor que estamos verificando se incrementa y sabemos que la ejecución se detendrá antes de que alcance el número objetivo.

Hemos visto que podemos comenzar con un número para usar dentro de un ciclo for e incrementarlo en uno. Pero, ¿y si quieres incrementarlo en 5? o ¿qué sucede si realmente necesita disminuirlo en uno? ¿Podríamos lograr también aquellos con bucles for? Bueno, sí podemos. Al definir un ciclo for, siempre que se comience con una condición inicial y se termine con otra condición de forma controlada, tenemos un ciclo for en funcionamiento. Por ejemplo, podemos crear una cuenta regresiva que comience desde 5:

for (let countDown = 5; countDown > 0; countDown--){
    alert(countDown + "!");
}

Tenga en cuenta que para que los números decrecientes funcionen, debemos comenzar con el número grande en primer lugar. Cuando comencemos a ejecutar este código, una de las primeras cosas que sucederá es que tendremos una variable de cuenta regresiva creada para nosotros, y el valor de esa variable se establecerá en el número 5. El siguiente paso es verificar la condición proporcionada con respecto a las variables Después de crear la variable en la iteración inicial del bucle, la regla de iteración que coloquemos se aplicará al final de cada iteración.

En el último ejemplo, hemos establecido "countDown —" como "¿Qué cambiará al final de cada iteración?". En este caso estamos decrementando el número uno. Y antes de empezar cada nueva iteración también se comprueba la condición que hemos puesto. La condición que establecimos en el último ejemplo fue:

“countDown > 0”, lo que significa que este ciclo for continuará ejecutando el código que proporcionamos siempre que la variable de cuenta regresiva sea mayor que 0.

También podemos incrementar el número en más de uno, ya sea en dirección positiva o negativa. Por ejemplo, podemos comenzar con un número pequeño y aumentarlo a la tasa que queramos:

for (let someVariable = 0; someVariable < 15; someVariable = someVariable + 5){
    alert(someVariable);
}

Al ejecutar este código, se alertará al usuario con: 0, 5 y 10.

Estas son las principales características de los bucles for. Acaba de ver los dos tipos principales de bucles, a saber, el bucle while y el bucle for. Ambos se usan con bastante frecuencia tanto en la programación en general como en JavaScript. Usaremos estos bucles según nuestras necesidades, por lo que es importante comprender los conceptos básicos. Si cree que se siente algo cómodo con estos temas, en el próximo tutorial veremos otro concepto importante en JavaScript.

Autor: Robert Whitney

Experto en JavaScript e instructor que entrena a los departamentos de TI. Su objetivo principal es aumentar la productividad del equipo enseñando a otros cómo cooperar de manera efectiva mientras codifican.

Ver todas las publicaciones

Curso de JavaScript de principiante a avanzado en 10 publicaciones de blog:

1. ¿Cómo empezar a codificar en JavaScript?
2. Conceptos básicos de JavaScript
3. Variables y diferentes tipos de datos en JavaScript
4. Snippets y estructuras de control
5. Bucles while y bucles for
6. matriz Java
7. Funciones JavaScript
8. Objetos JavaScript
9. Métodos de JavaScript y más
10. Resumen del curso de JavaScript