Gráffica Academy
Creado para la ComunidadAprende a programar
Escribir al equipo

Contacta con el equipo de Gráffica Estudio Academy.

IG @ X in
Sintaxis

Condicionales y bucles

Con los operadores de comparación del módulo anterior, ya puedes construir la pieza que le da a tu código capacidad de decisión: los condicionales. Y en cuanto una acción se repite, entran los bucles — la forma de decirle al navegador "haz esto varias veces" sin copiar y pegar la misma línea veinte veces.

if, else if y else

Un condicional ejecuta un bloque de código solo si una condición es verdadera. Puedes encadenar varias condiciones con else if, y dejar un else final para "en cualquier otro caso":

condicionales.js
1
Pulsa "Ejecutar" para ver el resultado.

Para condiciones cortas que devuelven un valor, el operador ternario que viste en el módulo anterior es más directo:

Ternario

const mensaje = nota >= 5 ? 'Aprobado' : 'Suspenso'; — un if/else en una sola línea, pensado para asignar un valor.


switch: cuando comparas un valor con muchas opciones

Si te ves encadenando muchos else if comparando la misma variable contra valores distintos, un switch suele leerse mejor. No olvides el break en cada caso — sin él, la ejecución "cae" al siguiente caso.

switch.js
1
Pulsa "Ejecutar" para ver el resultado.
⚠️ Error común

Olvidar el break dentro de un switch. Sin él, JavaScript sigue ejecutando el caso siguiente aunque no coincida — a veces es un truco intencionado (como "sabado" y "domingo" compartiendo resultado arriba), pero casi siempre es un bug.


Bucles: repetir sin copiar y pegar

for

for (let i = 0; i < 5; i++) { ... } — el más clásico: inicio, condición de parada, incremento.

while

Repite mientras la condición sea true. Útil cuando no sabes de antemano cuántas vueltas vas a dar.

do...while

Como while, pero comprueba la condición al final — así que el bloque se ejecuta siempre al menos una vez.

for...of

Recorre los elementos de un array o string directamente, sin manejar un índice a mano. Lo verás mucho en el módulo de arrays.

bucles.js
1
Pulsa "Ejecutar" para ver el resultado.
💡 Consejo

break corta el bucle entero de golpe. continue solo salta el resto de esa vuelta y sigue con la siguiente. En el ejemplo de arriba nunca ves "Vuelta numero 3" (continue) ni "Vuelta numero 5" (break la corta antes).

El clásico bucle infinito

Si olvidas actualizar la condición de un while (por ejemplo, olvidar i++), el bucle no termina nunca y bloquea la pestaña del navegador. Es uno de los primeros errores que comete casi todo el mundo — si tu navegador se congela mientras pruebas bucles, ya sabes por dónde empezar a mirar.

Comprueba lo que has aprendido

3 preguntas · sin nota, solo para afianzar lo de hoy

1. Dentro de un switch, ¿qué pasa si olvidas el break?

2. ¿Cuál es la diferencia entre break y continue en un bucle?

3. ¿Qué garantiza un bucle do...while que un while normal no garantiza?

Síguenos IG @ X in