Condicionales y Bucles en JavaScript: cómo tomar decisiones y repetir tareas sin volverte loco
¿Alguna vez te has enredado con un if dentro de un for… dentro de otro if? 😵💫
Los condicionales y los bucles son el corazón de cualquier programa en JavaScript, pero también son una de las partes que más confusión generan al principio.
En esta guía vamos a verlos como lo que son: herramientas para tomar decisiones y herramientas para repetir tareas. No vamos a memorizar sintaxis de memoria, sino a construir una forma mental clara de pensar en ellos, con ejemplos simples y código que puedes copiar y pegar en tu editor.
El Mapa Mental: Decisiones y Repeticiones 🧠
Todo programa, por muy complejo que parezca, se reduce a tres cosas:
- Secuencia: instrucciones que se ejecutan una detrás de otra.
- Decisión (condicionales): el código responde a una pregunta y elige un camino.
- Repetición (bucles): el código repite algo mientras tenga sentido hacerlo.
En esta guía nos enfocamos en las dos últimas: condicionales (para decidir) y bucles (para repetir). Si las entiendes bien, cualquier “laberinto” de código empezará a verse como una combinación de preguntas y repeticiones, en lugar de magia negra.
(condicionales)
(bucles)
Condicionales en JavaScript: Enseñando a tu Código a Elegir 🚦
Un condicional siempre responde a una idea muy simple:
“Si pasa X, entonces haz A. Si no, haz B.”
En JavaScript, las formas más comunes de expresar estas decisiones son:
ifyelseelse ifpara varias condiciones en cadenaswitchpara menús de opciones
if y else: el Semáforo Clásico
Imagina que quieres mostrar un mensaje distinto según la hora del día:
// Ejemplo: decidir qué saludo mostrar según la hora
const hora = 14; // 14 = 2 p.m.
if (hora < 12) {
console.log("Buenos días ☀️");
} else {
console.log("Buenas tardes 🌇");
}
La condición hora < 12 es una pregunta booleana: solo puede ser true o false.
Si es true, se ejecuta el primer bloque. Si es false, se ejecuta el bloque de else.
else if: Varios Caminos Posibles
Cuando hay más de dos posibilidades, encadenamos else if:
const nota = 8.3;
if (nota >= 9) {
console.log("Sobresaliente 👑");
} else if (nota >= 7) {
console.log("Notable 💪");
} else if (nota >= 5) {
console.log("Aprobado 🙂");
} else {
console.log("Toca recuperar 😅");
}
La clave mental aquí es: solo se ejecuta el primer bloque cuya condición sea verdadera. El resto se ignoran, incluso si también serían verdaderas.
switch: Cuando Tienes un Menú de Opciones
switch es útil cuando comparas la misma variable contra varios valores posibles:
const rol = "editor";
switch (rol) {
case "admin":
console.log("Acceso total al sistema");
break;
case "editor":
console.log("Puedes crear y editar contenido");
break;
case "lector":
console.log("Solo lectura");
break;
default:
console.log("Rol no reconocido");
}
Cada case es una opción. El break corta la ejecución para que no “se caiga” a los siguientes casos.
Bucles en JavaScript: Repetir sin Copiar y Pegar 🔁
Un bucle responde a otra idea muy simple:
“Mientras se cumpla esta condición, sigue haciendo X.”
Los bucles nos ahorran escribir el mismo código una y otra vez. En JavaScript usaremos sobre todo:
forwhileydo...whilefor...ofyfor...inpara recorrer colecciones
for: Repetir un Número Conocido de Veces
El bucle for es perfecto cuando sabes cuántas veces quieres repetir algo:
// Imprimir los números del 1 al 5
for (let i = 1; i <= 5; i++) {
console.log("Iteración", i);
}
Piensa el for como tres partes:
- Inicio:
let i = 1; - Condición:
i <= 5;(mientras sea verdadera, se repite) - Actualización:
i++;(lo que pasa al final de cada vuelta)
Comentarios y Valoraciones
No hay comentarios aún. ¡Sé el primero en opinar!