Programación en JavaScript/Control/Bucles

Bucles

En programación, la función principal de un programa es aquella que es ejecutada para que sus instrucciones sean realizadas, bien por el procesador central (en el caso de un lenguaje compilado como C o Pascal), o por un intérprete, que es un intermediario entre el programa y el procesador central. De esta forma, la ejecución lineal de las instrucciones genera acciones, cosas que nuestro programa hace porque se lo hemos indicado. Ahora bien, ¿Qué ocurre cuando queremos hacer varias veces una misma cosa? Tendríamos que escribir el mismo código varias veces, aunque el problema sería más peliagudo si encima el número de veces a ejecutar el código fuera variable, cambiase según el estado del programa (definido por las variables). Para ello tenemos dos tipos de elementos fundamentales: bucles y funciones.

Un bucle permite repetir varias veces el mismo código en la misma situación, incluso aunque la repetición de ese código sea variable y no la misma cantidad de veces cada vez. Como estudiaremos luego, tenemos a nuestra disposición dos bucles, for y while. En el caso de JavaScript, los bucles son condicionales, es decir que, como en el caso de if, necesitamos de condiciones como las que hemos estudiado para realizar las repeticiones de código. En otros lenguajes de programación existen bucles incondicionales, lo que significa que sólo pueden ir de cierto punto a cierto punto (por ejemplo, para contar de 1 a 10, aunque esto, como veremos, también lo podemos hacer con los condicionales).

Por último, las funciones son elementos esenciales en programación por dos motivos: permite reutilizar el código de nuestro programa no sólo en el mismo programa, si no en otros posteriores, y además, permite estructurar las aplicaciones de forma que podamos dividir el problema en otros más pequeños. De ahí que a la programación con procedimientos y funciones se la llame estructurada (y no funcional como suelen indicar algunos neófitos: la programación funcional, que existe, es totalmente diferente de la programación con funciones). Veremos cómo reunir código en porciones llamadas funciones y usarlo varias veces en otras partes del código de nuestros programas.

For

Un bucle for nos permite repetir un bloque de código según unas condiciones concretas, siempre que estas sean verdaderas. Un bucle for tiene tres partes:

inicialización: en esta parte, debemos indicar las variables que vamos a usar en la condición. Lo más habitual es declarar variables numéricas, pero pueden ser perfectamente cadenas de caracteres, booleanos u objetos.
condición: una o varias condiciones (unidas por operadores lógicos), que deciden el número de iteraciones del bucle.
operación: una expresión que normalmente (aunque no es imprescindible) modificará las variables definidas en la primera parte.

Un ejemplo simple de bucle for sería:

for (x = 1; x < 10; x++)
{
  document.write("El número es " + x + "<br>");
}

Vamos a analizar este ejemplo. Fijémonos en la primera linea, donde podemos encontrar las tres partes que indicábamos antes:

x = 1 (inicialización): aquí usamos una variable x y le asignamos el valor 1, que será el valor de inicialización del bucle.
x < 10 (condición): nos encontramos con una condición muy simple, y que se leería como: "si x tiene un valor menor que 10, la condición es válida". Si la condición es válida, el bucle seguirá ejecutandose invariablemente. Veremos que eso puede generar un pequeño "problema", que a veces podemos incluso aprovechar para nuestros propósitos, el denominado "bucle infinito".
x++ (operación): aquí nos encontramos con una operación matemática usando un operador tipográfico "++", que viene a ser la misma operación que "x = x + 1". De hecho, también podemos usarla en vez de la que aparece, pero lo normal es que usemos un operador como éste (de hecho, si estudiamos código realizado por otros, veremos que es la forma más común).

Por tanto, el bucle for puede leerse como: "iniciamos 'x' con valor 1; el bucle se ejecutará mientras el valor de 'x' sea menor que 10, y cada vez que se ejecute el bucle el valor de 'x' se incrementará en 1"

Modificación de la variable de control dentro del bucle

A continuación podemos ver un ejemplo de cómo podemos usar la variable de control del bucle dentro de éste:

for (x = 1; x < 16; x++)
{
   if (x % 2) {
      x++;
    }
    document.write('Mi número es ' + x + '<br>');
}

Podemos apreciar en este ejemplo que el resultado no es el aparentemente esperado para este bucle, dado que aunque en la parte de operación incrementamos la variable sólo en 1, el resultado final es que sólo vemos números pares en la ventana. ¿Por qué? Fijémonos en el código del bucle:

el condicional if sólo será cierto en el caso de que el módulo de 'x' (la operación matemática de 'resto', representada por el operador '%') devuelva como resultado un valor impar.
si la condición de if se cumple, se ejecutará un trozo de código que incrementará el valor de 'x' en uno, influyendo de esta forma en el desarrollo del bucle.

De esta forma, en vez de mostrar los valores numéricos del 1 al 15, como sería en el caso normal, resulta que aparecen sólo valores pares. El truco en este código es sibilino pero potente: la operación 'x % 2' devolverá un 0 si 'x' es par, pero devolverá un valor distinto si es un número impar. ¿Esto que significa? Si el valor de la operación es cero, la condición es falsa (es un comportamiento muy habitual en muchos lenguajes de programación), con lo que la condición sólo será verdadera cuando 'x' sea impar. Un número impar devolverá un módulo mayor que cero al dividirlo entre 2. Al incrementar un valor impar en 1, se convierte en un valor par, que es lo que finalmente vemos en pantalla.

Parece enrevesado, pero un estudio a fondo de este código nos permite apreciar algunas de las propiedades ocultas de la programación en JavaScript. Muchas de estas propiedades y características se aprenden con la experiencia, pero en este curso veremos algunas de ellas que nos serán útiles en nuestro trabajo futuro.

Bucles anidados

Podemos anidar varios bucles uno dentro de otro, como en este caso:

for (x = 1; x < 10; x++)
   for (y = 1; y < 10; y++)
      document.write(x + ":" + y);

En este ejemplo, vemos que un bucle se ejecutará dentro del otro mostrándonos los valores de forma ordenada. No es preciso escribir llaves si el código a escribir es de una sola linea.

Bucles infinitos

Vamos a ver rápidamente cómo realizar un bucle infinito con for:

for (;;)
{
 document.write("Esto no se acaba nunca...");
}

Esto genera un pequeño problema... Si este bucle se ejecuta constantemente... ¿Qué hacemos para detenerlo o controlarlo? Se pueden utilizar dos palabras para controlar un bucle (sea cual sea), ya sea finito o infinito: break y continue.

Sin embargo, LAS BUENAS PRÁCTICAS DE PROGRAMACIÓN DESACONSEJAN TOTALMENTE EL USO EN CUALQUIER LENGUAJE DE PROGRAMACIÓN DE LAS SENTENCIAS break Y continue COMO MECANISMO DE CONTROL DEL FLUJO DEL PROGRAMA.

break es la palabra reservada para cortar un bucle en un momento determinado. Es muy usada en condicionales if, ya que al darse una cierta condición, podemos controlar un bucle cortándolo cuando se dé un cierto momento concreto.

continue, sin embargo, también corta la ejecución del bucle, pero no igual que break. Mientras que break finaliza definitivamente el bucle, continue salta lo que queda de bucle y sigue la siguiente iteración (repetición) sin más.

var x = 1;
for (;;)
{
   x++;
   if (x > 5) break;
   document.write(x + '<br>');
}

En este ejemplo vemos que, cuando el valor de x sea mayor de 5, el bucle se romperá. En este otro nos permite apreciar el resultado de usar continue:

for (x = 1; x < 10; x++)
{
   if (x % 2) continue;
   document.write(x + '<br>');
}

Ya nos podemos imaginar el resultado.

For sobre listas

Un caso particularmente útil es la utilización de bucles for para recorrer los elementos de una lista (o array). Podemos utilizar la sintaxis anterior recorriendo el array como en el siguiente ejemplo:

var lista = ["elemento1","elemento2","elemento3"];
for (idx=0; idx<lista.length; idx++)
{
   elemento_n = lista[idx];
   alert(elemento_n);
}

Sin embargo dado que su uso es tan habitual existe una sintaxis abreviada que veremos frecuentemente al consultar código javascript en Internet:

var lista = ["elemento1","elemento2","elemento3"];
for (elemento_n in lista) {
   alert(elemento_n);
}

elemento_n tomará sucesivamente todos los valores de la lista (array) sin necesidad de utilizar un índice (idx), haciendo el código más compacto.

While

El bucle while, al igual que el bucle for, también es condicional, aunque mucho más simple que éste, como vemos en el siguiente ejemplo:

var x = 1;
while (x < 10)
{
   document.write("Mi número es: " + x + "<br>");
   x++;
}

Como vemos, este bucle es idéntico al bucle for que estudiamos en el apartado anterior pero mucho más simple.

¿Para qué hay dos bucles que al fin y al cabo hacen los mismo? En el pasado, for era un bucle incondicional, es decir, que sólo podía ir de cierto punto a cierto punto, sin comprobaciones intermedias. Por eso se desarrolló el bucle while. Sin embargo, lenguajes más avanzados como C crearon un for condicional más potente. Aunque realiza funciones semejantes, while tiene como ventaja que, al ser más simple, también es más rápido y eficaz en términos de rendimiento que for. Además, algunas operaciones resultan simplificadas:

while (verdad)
{
   if (verdad) document.write("Es verdad");
   verdad = !verdad;
}

Este extraño ejemplo es significativo por el uso de variables lógicas o booleanas. verdad es una variable lógica que sólo puede tener los valores true y false. Si verdad es true, el bucle se ejecutará. Al ejecutarse, también se comprobará la condicion interna y se imprimirá el mensaje "Es verdad". Lo interesante viene después. La expresión verdad = !verdad significa "hacer que verdad sea contrario a verdad". Si verdad era igual a true, ahora será igual a false (el operador !, como sabemos, es la negación, y por lo tanto, cambiará el valor de la variable a su contrario).

while tiene una versión inversa: do-while. Este bucle tiene como diferencia respecto de while que, mientras que en while la condición se comprueba incluso antes de comenzar a ejecutar el bucle (lo que implica que si la condición ya fuese falsa antes de entrar en el bucle, éste no llegaría a ejecutarse nunca), en do-while la condición se comprueba a posteriori, con lo que tenemos la oportunidad de ejecutar el bucle al menos una vez. Esto también es una ventaja con respecto a for, que en ese sentido se comporta igual que while. Veamos un ejemplo:

var x = 0;
   
do
{
   document.write("Mi número es el " + x + "<br>");
   x++;
} while (x < 10);