Estructuras de control: bucle for

El bucle for es uno de los más utilizados en JavaScript y en muchos otros lenguajes de programación.

Se utiliza cuando sabemos de antemano cuántas veces queremos repetir una acción.

Es una herramienta muy útil para realizar tareas repetitivas, como mostrar una serie de números, recorrer una lista de elementos o ejecutar un bloque de código un número determinado de veces.

---

Explicación

Imagina que eres el encargado de repartir 10 folletos.

Sabes exactamente cuántos folletos tienes y cuántas veces tendrás que repetir la misma acción.

Podrías pensar el proceso así:

1. Empiezo con el folleto número 1.
2. Lo reparto.
3. Paso al siguiente folleto.
4. Repito el proceso hasta llegar al número 10.

El bucle for funciona exactamente de esa manera.

Antes de comenzar, indica:

• Desde dónde empieza.
• Hasta cuándo debe repetirse.
• Cómo pasa de una repetición a la siguiente.

Por eso es el bucle ideal cuando conocemos el número de repeticiones.

---

Sintaxis

La estructura general de un bucle for es la siguiente:

for (inicialización; condición; actualización) {
    // Código que se repetirá
}

Aunque al principio pueda parecer una sintaxis complicada, en realidad está formada por tres partes muy sencillas, que generalmente siempre son iguales.

Inicialización

Es la parte donde se crea la variable que controlará el número de repeticiones.

let i = 0;

Normalmente se utiliza una variable llamada i, abreviatura de índice (index en inglés).

Podría llamarse de cualquier otra forma, pero i es una convención muy extendida.

En esta parte de la inicialización le damos a i el valor por el que queremos empezar. Si por ejemplo queremos contar del 1 al 10, el valor de i será 1.

---

Condición

Indica cuándo debe continuar el bucle.

Mientras la condición sea verdadera, el bucle seguirá ejecutándose.

i < 5

Cuando la condición deje de cumplirse, el bucle terminará. Es decir, la condición i < 5 indica que el código seguirá repitiéndose mientras la i tome valores más pequeños que 5.

Otra manera más sencilla de verlo es la siguiente:

Imaginemos que queremos contar del 1 al 10, en la parte de la inicilización indicaremos que la let i = 1, y en la parte de la condición indicaremos i < 11, ya que queremos que siga contando hasta justo antes del 11 (que es el 10). Una regla a seguir podría ser siempre pensar en "final + 1", de manera que si queremos contar hasta 10 pondremos i < 11, si queremos contar hasta 25 pondremos i < 26...

Por norma general SIEMPRE se escribirá i < algo, nunca i <= algo ni i > algo, aunque funcionan.

---

Actualización

Después de ejecutar el código del bloque, se modifica la variable i.

Lo más habitual es aumentar su valor en una unidad, para que aumente de 1 en 1.

i++

También podríamos disminuirla o modificarla de otras formas, aunque no es lo más habitual.

---

Juntando las tres partes obtenemos un bucle completo.

Este ejemplo mostraría los números del 0 al 4.

for (let i = 0; i < 5; i++) {
    console.log(i);
}

---

¿Cómo funciona paso a paso?

Veamos qué ocurre en el siguiente ejemplo.

for (let i = 0; i < 3; i++) {
    console.log(i);
}

El proceso sería el siguiente:

Valor de i	¿Se cumple i < 3?	Se ejecuta
0	Sí	Se muestra 0
1	Sí	Se muestra 1
2	Sí	Se muestra 2
3	No	El bucle termina

Salida:

0
1
2

Es importante observar que el número 3 nunca llega a mostrarse, porque cuando i vale 3, la condición deja de cumplirse.

---

Cuántas veces...?

Es habitual hacer uso de este bucle para ejecutar un código "x veces". Para ello, la sintaxis será siempre la misma:

for (let i = 0; i < veces; i++){

}

¿Qué ocurre aquí?

• Aprovechamos que la i va a ir aumentando del 0 hasta veces para que el código de dentro se ejecute dichas veces.
• Por norma general SIEMPRE se empieza en let i = 0, y la condición es i < veces-

Por ejemplo en el caso que hemos planteado al principio de mostrar del mensaje de "Hola" 30 veces el resultado sería:

for (let i = 0; i < 30; i++){
    console.log("Hola");
}

---

Contadores y acumuladores

Cuando trabajamos con bucles es muy habitual utilizar variables que van cambiando su valor en cada repetición.

Las dos más importantes son los contadores y los acumuladores.

Aunque ambos modifican su valor durante el bucle, su objetivo es diferente.

• Un contador sirve para contar cuántas veces ocurre algo.
• Un acumulador sirve para ir guardando o sumando valores.

Comprender esta diferencia te ayudará a resolver una gran cantidad de problemas de programación.

---

Contadores

Un contador es una variable cuyo valor aumenta o disminuye cada vez que ocurre un determinado evento.

Por ejemplo, imagina que un vigilante quiere contar cuántas personas entran en un edificio.

Cada vez que entra una persona, el contador aumenta en una unidad.

En programación hacemos exactamente lo mismo.

let contador = 0;

for (let i = 1; i <= 5; i++) {
    contador++;
}

console.log(contador);

Salida:

5

La variable contador comienza valiendo 0.

En cada repetición utilizamos el operador ++ para aumentar su valor en una unidad.

Al finalizar el bucle, el contador indica cuántas veces se ha ejecutado el bloque.

También es posible incrementar el contador utilizando otra sintaxis equivalente.

contador = contador + 1;

O bien:

contador += 1;

Las tres formas producen el mismo resultado, aunque contador++ es la más utilizada cuando solo queremos aumentar el valor en una unidad.

---

Ejemplo de contador

Queremos saber cuántos números pares hay entre el 1 y el 20.

let cantidadPares = 0;

for (let i = 1; i <= 20; i++) {
    if (i % 2 === 0) {
        cantidadPares++;
    }
}

console.log(cantidadPares);

Salida:

10

En este caso, el contador solo aumenta cuando el número es par.

No importa cuál sea el número, únicamente nos interesa saber cuántos cumplen la condición.

---

Acumuladores

Un acumulador también es una variable que cambia durante el bucle, pero en lugar de contar repeticiones, va almacenando un valor.

Normalmente se utiliza para realizar sumas.

Imagina una hucha.

Cada vez que introduces una moneda, el dinero total aumenta.

La hucha no cuenta cuántas monedas tienes, sino cuánto dinero has acumulado.

En programación funciona igual.

let suma = 0;

for (let i = 1; i < 6; i++) {
    suma += i;
}

console.log(suma);

Salida:

15

La variable suma comienza en 0.

En cada repetición añadimos el valor actual de i.

Al finalizar el bucle obtenemos la suma de todos los números del 1 al 5.

La variable suma ha ido acumulando los valores de i tal que así:

• suma = 0
• suma = 0 + 1
• suma = 0 + 1 + 2
• suma = 0 + 1 + 2 + 3
• suma = 0 + 1 + 2 + 3 + 4
• suma = 0 + 1 + 2 + 3 + 4 + 5

---

Ejemplo de acumulador

Queremos calcular cuánto dinero gana una persona si cobra 80 € al día durante una semana laboral de cinco días.

let salario = 0;

for (let dia = 1; dia < 6; dia++) {
    salario += 80;
}

console.log(`${salario} €`);

Salida:

400 €

El acumulador va guardando el total del dinero ganado.

---

Diferencias entre un contador y un acumulador

Contador	Acumulador
Cuenta cuántas veces ocurre algo.	Guarda un valor que va aumentando o cambiando.
Normalmente aumenta de uno en uno.	Puede aumentar con cualquier valor.
Suele utilizar ++.	Suele utilizar +=.
Responde a la pregunta "¿Cuántos?".	Responde a la pregunta "¿Cuánto?".

---

¿Cómo saber cuál necesitas?

Una forma muy sencilla de decidirlo consiste en hacerse una pregunta antes de escribir el código.

Si la pregunta comienza por:

• ¿Cuántos...? → probablemente necesites un contador.

Ejemplos:

• ¿Cuántos alumnos han aprobado?
• ¿Cuántos productos quedan en stock?
• ¿Cuántos números son pares?

Si la pregunta comienza por:

• ¿Cuánto...? → probablemente necesites un acumulador.

Ejemplos:

• ¿Cuánto dinero hemos vendido?
• ¿Cuánto pesan todos los paquetes?
• ¿Cuál es la suma de todos los números?

En muchos problemas reales utilizarás ambos al mismo tiempo.

---

Ejemplos

Ejemplo 1. Mostrar los números del 1 al 5

for (let i = 1; i < 6; i++) {
    console.log(i);
}

Salida:

1
2
3
4
5

---

Ejemplo 2. Contar hacia atrás

for (let i = 5; i > 0; i--) {
    console.log(i);
}

Salida:

5
4
3
2
1

En este caso utilizamos i-- para disminuir el valor de la variable.

---

Ejemplo 3. Mostrar únicamente los números pares del 1 al 10

for (let i = 1; i < 11; i += 2 ) {
    console.log(i);
}

o usando bucle normal e if:

for (let i = 1; i < 11; i++) {
    if (i % 2 === 0){
        console.log(i);
    }
}

Salida:

2
4
6
8
10

---

Ejemplo 4. Calcular una suma

Queremos sumar todos los números del 1 al 100.

let suma = 0;

for (let i = 1; i < 101; i++) {
    suma += i;
}

console.log(suma);

Salida:

5050

En este ejemplo, la variable suma va acumulando el resultado en cada repetición.

---

Errores frecuentes

Empezar en un número incorrecto

for (let i = 0; i <= 5; i++) {
    console.log(i);
}

Si queríamos mostrar los números del 1 al 5, este código también mostrará el 0.

---

Olvidar actualizar la variable

for (let i = 0; i < 5;) {
    console.log(i);
}

Como i nunca cambia de valor, la condición siempre será verdadera y el bucle nunca terminará.

---

Modificar la variable de control innecesariamente

for (let i = 0; i < 5; i++) {
    console.log(i);

    i += 2;
}

Aunque funciona, hace que el comportamiento del bucle sea más difícil de entender.

Siempre que sea posible, deja la actualización en la tercera parte del for. no modifiques la i una vez dentro del bucle.

---

Buenas prácticas

• Utiliza for cuando conozcas el número de repeticiones.
• Evita modificar la variable de control dentro del bloque.
• Escribe condiciones fáciles de leer.
• Mantén el bloque del bucle lo más sencillo posible.

---

Resumen

El bucle for permite repetir un bloque de código un número determinado de veces.

Su sintaxis está formada por tres partes:

• Inicialización.
• Condición.
• Actualización.

Es el bucle más utilizado cuando conocemos de antemano cuántas veces debe repetirse una acción y constituye una de las herramientas fundamentales de cualquier programa en JavaScript.

---

Ejemplos resueltos

Ejercicio resuelto 1 - Calcular el precio total de varios productos iguales

Enunciado

Una tienda vende cuadernos por 3 € cada uno.

Un cliente compra 8 cuadernos.

Crea un programa que calcule el precio acumulado utilizando un bucle for.

Análisis

Necesitamos repetir una suma ocho veces.

En cada repetición añadiremos el precio de un cuaderno al total.

Solución

const precioCuaderno = 3;
let total = 0;

for (let i = 0; i < 8; i++) {
    total += precioCuaderno;
}

console.log(`Total: ${total} €`);

Explicación

Primero inicializamos la variable total con el valor 0.

El bucle se ejecuta ocho veces.

En cada repetición añadimos el precio de un cuaderno al total.

Al finalizar el bucle obtenemos el importe final de la compra.

---

Ejercicio resuelto 2 - Contar cuántas bombillas están encendidas

Enunciado

En un edificio hay 12 bombillas.

Las bombillas con número par están encendidas.

Muestra por pantalla únicamente las bombillas encendidas.

Análisis

Debemos recorrer todos los números del 1 al 12.

En cada repetición comprobaremos si el número es par.

Solución

for (let bombilla = 1; bombilla < 13; bombilla++) {
    if (bombilla % 2 === 0) {
        console.log(`Bombilla ${bombilla}: encendida`);
    }
}

Explicación

El bucle recorre todas las bombillas.

La condición bombilla % 2 === 0 permite identificar los números pares.

Solo en esos casos se muestra el mensaje.

---

Ejercicios propuestos

Nivel 1

1. Muestra los números del 10 al 20.

2. Muestra los números del 20 al 10 contando hacia atrás.

3. Muestra todos los números múltiplos de 5 entre 5 y 50.

---

Nivel 2

4. Calcula la suma de todos los números del 50 al 100.

5. Muestra la tabla de multiplicar del número 9.

6. Calcula el resultado de multiplicar todos los números del 1 al 6.

---