Condicionales

javascript condicionales

🧭 Toma de decisiones en programación

Los condicionales son instrucciones que permiten a nuestros programas adaptarse y responder según diferentes situaciones, similar a cómo tomamos decisiones cotidianas.

Analogía

Piensa en los condicionales como un chef preparando un platillo según las preferencias del cliente:

  • Si el cliente es vegetariano, preparamos un plato sin carne
  • Si el cliente tiene alergias, evitamos ciertos ingredientes
  • Si no hay restricciones especiales, preparamos el plato regular

De la misma manera, nuestro código puede realizar diferentes acciones según las condiciones.

Existen distintos modos de crear condicionales:

  • if, else y else if - para decisiones simples y múltiples
  • Operador ternario - para decisiones rápidas y sencillas
  • switch - para múltiples opciones específicas

🔄 Estructuras Condicionales Básicas

🚦 if

La palabra if significa si…, como en: Si limpias tu cuarto, puedes seguir estudiando programación

Cuando queremos crear una acción que sólo ocurra bajo ciertas condiciones, podemos usar esta instrucción:

En código se ve algo así:

if (condicion) {
// Instrucción que se ejecuta si la condición es verdadera
}
Analogía

Imagina que tienes un perrito y quieres darle un premio:

  • Si el perrito se sienta cuando se lo pides, le das una galleta

De la misma manera, nuestro código puede ejecutar acciones cuando se cumple una condición.

Por ejemplo:

let perritoSentado = true; // El perrito está sentado
if (perritoSentado) {
console.log("¡Buen chico! Aquí tienes tu galleta 🦴");
}

En este ejemplo, si el perrito está sentado (la condición es verdadera), mostraremos un mensaje de felicitación y le daremos su premio.

🔀 else

La palabra else significa en otro caso, como en: Si limpias tu cuarto, puedes jugar. En otro caso, te quito el internet.

Nos ayuda a crear una instrucción que se ejecutará por defecto si es que no se cumple la condición de if:

La anatomía del código es la siguiente:

if (condicion) {
// Instrucción que se ejecuta si la condición es verdadera
} else {
// Instrucción que se ejecuta si la condición es falsa
}
Analogía

Piensa en un semáforo:

  • Si la luz está verde, los autos pueden avanzar
  • En otro caso (luz roja), los autos deben detenerse

De la misma manera, nuestro código puede tomar dos caminos diferentes según una condición.

Por ejemplo:

let luzVerde = false; // El semáforo está en rojo
if (luzVerde) {
console.log("¡Adelante! Puedes avanzar 🚗");
} else {
console.log("¡Alto! Debes detenerte 🛑");
}

En este ejemplo, como el semáforo está en rojo (luzVerde es false), el código mostrará el mensaje de alto.

🔄 else if

La frase else if significa de lo contrario si…, aunque es más sencillo pensarlo como … o si…. Como en el siguiente escenario:

  • Si limpias tu cuarto, puedes…
  • o si lavas los trastes, puedes…
  • …en otro caso, te quito el internet

Nos ayuda a crear más caminos dentro de estas decisiones.

La anatomía del código es la siguiente:

if (condicion1) {
// Instrucción que se ejecuta si la condición1 es verdadera
} else if (condicion2) {
// Instrucción que se ejecuta si la condición2 es verdadera
} else {
// Instrucción que se ejecuta si ninguna condición es verdadera
}
INFO

Podemos agregar tantas condiciones else if como necesitemos para crear diferentes caminos en nuestro programa.

Analogía

Piensa en un videojuego donde tu personaje obtiene diferentes poderes según lo que recoge:

  • Si recoge una estrella, se vuelve invencible
  • O si recoge una flor, puede lanzar fuego
  • O si recoge un hongo, se hace más grande
  • En otro caso, mantiene sus habilidades normales

De la misma manera, el código puede tomar diferentes caminos según las condiciones que se cumplan.

Por ejemplo:

let poder = "estrella";
if (poder === "estrella") {
console.log("¡Eres invencible! ⭐");
} else if (poder === "flor") {
console.log("¡Puedes lanzar fuego! 🔥");
} else if (poder === "hongo") {
console.log("¡Te has hecho más grande! 🍄");
} else {
console.log("Tienes habilidades normales 🚶");
}
TIP

En casos de múltiples caminos es recomendable usar la estructura switch. La veremos al final de este artículo.

❓ Operador ternario

Existe una forma mucho más corta de usar un if + else. Le llamamos operador ternario.

Su anatomía se ve así:

condicion ? casoVerdadero : casoFalso;
  • La condición va antes del signo de interrogación ?
  • El primer valor (después del ?) es el resultado si la condición es verdadera
  • El segundo valor (después del :) es el resultado si la condición es falsa
Analogía

El operador ternario es como hacer una pregunta rápida con dos posibles respuestas:

¿Está lloviendo? Entonces llevo paraguas, si no, llevo gafas de sol

Por ejemplo:

let estaLloviendo = true;
let queLlevar = estaLloviendo ? "Llevo paraguas ☂️" : "Llevo gafas de sol 😎";
console.log(queLlevar);

Terminal window
Llevo paraguas ☂️

🔄 switch

La palabra switch viene del inglés y significa “interruptor” o “selector”.

Cuando tenemos distintos “caminos” para nuestro código es preferible utilizar la estructura switch, esta nos permite crear múltiples casos de una forma más estructurada.

La anatomía se ve de la siguiente manera:

switch (expresion) {
case valor1:
// Instrucciones para caso 1
break;
case valor2:
// Instrucciones para caso 2
break;
default:
// Instrucciones para los casos restantes
}

Los elementos principales son:

  • switch (expresion): Evalúa una expresión para saber qué caso ejecutar
  • case valorN: Define el valor a comparar con la expresión
  • break: Evita que el código continúe ejecutando los casos siguientes
  • default: Se ejecuta cuando ningún caso coincide con la expresión
Analogía

Imaginemos que estamos eligiendo qué ver en streaming según nuestro estado de ánimo:

  • Si tienes ganas de reír -> Abres ComedyFlix 🎭
  • Si quieres suspenso -> Vas a MysteryPrime 🔍
  • Si prefieres acción -> Entras a ActionMax 💥
  • Si ninguna aplica -> Reproduces tendencias de TikTok 🎵

El switch sería como el menú para seleccionar el contenido adecuado.

let plataforma = "ComedyFlix";
switch (plataforma) {
case "ComedyFlix":
console.log("▶️ Reproduciendo 'Cómo conocí a tu meme'");
break;
case "MysteryPrime":
console.log("🔦 Iniciando 'El misterio del WiFi perdido'");
break;
case "ActionMax":
console.log("💣 Cargando 'John Wick: La venganza del examen final'");
break;
default:
console.log("🔄 Seleccionando videos virales del momento...");
}

También es posible que haya lógica donde varios casos comparten las mismas instrucciones:

let dia = "Martes";
switch (dia) {
case "Lunes":
case "Miércoles":
console.log("📚 Día de estudio en la biblioteca");
break;
case "Martes":
case "Jueves":
console.log("🏀 Práctica de deportes después de clase");
break;
case "Viernes":
console.log("🎉 ¡Noche de juegos con amigos!");
break;
default:
console.log("😴 Descanso en casa");
}

☝️🤓
🏋️‍♂️ Ejercicio

Crea un programa que determine si una persona puede conducir basándose en su edad:

  • Si es menor de 16 años, muestra “Muy joven para conducir”
  • Si tiene entre 16 y 17 años, muestra “Puede obtener un permiso de aprendizaje”
  • Si tiene 18 años o más, muestra “Puede obtener una licencia completa”

Utiliza la estructura if-else para resolverlo.

🏋️‍♂️ Ejercicio

Crea un sistema de logros para un juego:

  • El jugador tiene una puntuación almacenada en la variable puntuacion
  • Usa el operador ternario para asignar ”🏆 Experto” si la puntuación es mayor a 100, o ”🎮 Novato” si es menor o igual
🏋️‍♂️ Ejercicio

Crea un sistema de menú para una cafetería:

  • La variable opcion contiene un número del 1 al 4
  • Opción 1: ”☕ Café”
  • Opción 2: ”🫖 Té”
  • Opción 3: ”🧃 Jugo”
  • Opción 4: ”🥤 Refresco”
  • Cualquier otra opción: ”❌ Opción no válida”

Utiliza la estructura switch para mostrar la bebida seleccionada.

🚀 Extra
  • Encuentra 3 ejemplos de formularios web que usen condicionales (como validación de edad o contraseñas)
  • Observa cómo las aplicaciones de clima cambian su interfaz según la condición meteorológica
  • Identifica cómo los juegos online usan condicionales para determinar si ganaste o perdiste

Comentarios