Unidad 10 · Lecciones 071-079

Estructuras de Control

Hasta ahora tu codigo se ejecutaba siempre de arriba abajo, sin desviarse. Las estructuras de control rompen esa linealidad: permiten que se ejecute un codigo u otro segun lo que ocurra. Es lo que hace un cajero automatico antes de darte dinero, y lo que hace Netflix antes de dejarte ver una pelicula.

📚 9 lecciones originales ⏱ Lectura ~35 min ↩ Requiere: Unidades 6 y 9

🎯 Objetivo de aprendizaje

Al terminar sabras escribir condiciones con if, else if y else, decidir cuando conviene un switch, combinar condiciones con && y ||, cortar la ejecucion con return y resolver casos simples con el operador ternario.

10.1 El `if`

Piensa en un cajero automatico: insertas la tarjeta, tecleas el PIN, si es correcto sigues, si no te avisa del error. Pides retirar dinero y el cajero comprueba que tengas saldo suficiente. Cada uno de esos puntos es un if.

Estructura basica

const puntaje = 1000;

if (puntaje === 1000) {
    console.log('Si es igual');
} else {
    console.log('No es igual');
}

Anatomia

if — palabra reservada.
( ... ) — dentro del parentesis va la condicion a evaluar.
{ ... } — el codigo que se ejecuta si la condicion se cumple.
else { ... } — opcional. Recoge todos los demas casos.

⚠ Recuerda: un = asigna, dos o tres comparan

Dentro de la condicion siempre comparas, nunca asignas. Y usa el comparador estricto ===, como aprendiste en la Unidad 5.

💡 Sobre las llaves

Si el cuerpo tiene una sola linea, tecnicamente puedes omitir las llaves. El curso recomienda no hacerlo: en otros lenguajes son obligatorias y el codigo se lee peor.

El comparador estricto dentro de un `if`

== frente a === en una condicion

const puntaje = 1000;

// Comparador flexible: convierte el string y entra
if (puntaje == '1000') {
    console.log('Con == : si es igual');
} else {
    console.log('Con == : no es igual');
}

// Comparador estricto: el tipo no coincide, no entra
if (puntaje === '1000') {
    console.log('Con === : si es igual');
} else {
    console.log('Con === : no es igual');
}

Y la version negada, para comprobar que dos valores son distintos:

!= y !==

const puntaje = 1000;

if (puntaje !== '1000') {
    console.log('Son diferentes (comparando tambien el tipo)');
}

if (puntaje != '1000') {
    console.log('Son diferentes (solo el valor)');
} else {
    console.log('Con != los da por iguales');
}

10.2 Comparar magnitudes en una condicion

Un caso real: puede pagar o no

const dinero = 500;
const totalAPagar = 300;

if (dinero >= totalAPagar) {
    console.log('Si podemos pagar');
} else {
    console.log('Fondos insuficientes');
}

⚠ El caso limite

Si el dinero y el total valen exactamente lo mismo, > devolveria false y rechazarias una compra valida. Por eso aqui el operador correcto es >=.

💡 Consejo de legibilidad

Ordena las variables de forma que la condicion se lea en el sentido que piensas. dinero >= totalAPagar se entiende al leerlo; totalAPagar <= dinero dice lo mismo pero obliga a pensarlo dos veces. No es una regla del lenguaje, es una cuestion de claridad.

10.3 `else if`: mas de dos caminos

Varias condiciones encadenadas

const dinero = 300;
const totalAPagar = 500;
const tarjeta = true;
const cheque = true;

if (dinero >= totalAPagar) {
    console.log('Si podemos pagar en efectivo');
} else if (tarjeta) {
    console.log('Si puedo pagar porque tengo la tarjeta');
} else if (cheque) {
    console.log('Si puedo pagar con cheque');
} else {
    console.log('Fondos insuficientes');
}

✗ La regla que provoca mas errores

Un if ejecuta solo la primera condicion que se cumpla y se olvida del resto. No evalua todas. En el ejemplo anterior, aunque cheque tambien sea true, nunca llegara a ejecutarse porque tarjeta se cumplio antes.

Por que el orden importa

El mismo puntaje, dos mensajes posibles

const puntaje = 500;

// ORDEN INCORRECTO: entra en la primera y nunca llega a "Excelente"
if (puntaje > 300) {
    console.log('Buen puntaje, felicidades');
} else if (puntaje > 400) {
    console.log('Excelente');
}

Corregido: de la condicion mas exigente a la menos

const puntaje = 500;

if (puntaje > 400) {
    console.log('Excelente');
} else if (puntaje > 300) {
    console.log('Buen puntaje, felicidades');
}

💡 Regla practica

Coloca primero la condicion mas restrictiva (la que se cumple menos veces) y ve bajando. Si pones la mas general arriba, absorbera todos los casos.

10.4 `switch`: muchas opciones, un solo valor

Cuando encadenas diez o veinte else if comparando siempre la misma variable, el codigo se vuelve dificil de leer. Para eso esta el switch.

Metodo de pago

const metodoPago = 'efectivo';

switch (metodoPago) {
    case 'efectivo':
        console.log(`Pagaste con ${metodoPago}`);
        break;

    case 'cheque':
        console.log(`Pagaste con ${metodoPago}`);
        break;

    case 'tarjeta':
        console.log(`Pagaste con ${metodoPago}`);
        break;

    default:
        console.log('Metodo de pago no soportado');
        break;
}

Anatomia

switch (variable) — entre parentesis va el valor que se va a comprobar.
case 'valor': — cada posible coincidencia. Ojo: termina en dos puntos.
break; — imprescindible. Detiene el switch; sin el, seguiria ejecutando los casos siguientes.
default: — el equivalente al else: se ejecuta si ningun case coincide.

Con un metodo no contemplado

const metodoPago = 'bitcoin';

switch (metodoPago) {
    case 'efectivo':
        console.log(`Pagaste con ${metodoPago}`);
        break;
    case 'tarjeta':
        console.log(`Pagaste con ${metodoPago}`);
        break;
    default:
        console.log('Metodo de pago no soportado');
        break;
}

💡 No solo sirve para console.log

Dentro de cada case puedes llamar a funciones, igual que en un if:

Llamando funciones desde un case

function pagar() {
    console.log('Procesando el pago...');
}

const metodoPago = 'efectivo';

switch (metodoPago) {
    case 'efectivo':
        pagar();
        break;
    default:
        console.log('Metodo no soportado');
        break;
}

10.5 El operador `&&` (AND): todas las condiciones

Para comprar en Amazon necesitas dos cosas a la vez: tener cuenta y tener saldo. Ninguna de las dos por separado basta.

Dos condiciones obligatorias

const usuario = true;
const puedePagar = true;

if (usuario && puedePagar) {
    console.log('Si puedes comprar');
} else {
    console.log('No, no puedes comprar');
}

Si falla una, falla todo

const usuario = true;
const puedePagar = false;   // <-- basta con que una sea false

if (usuario && puedePagar) {
    console.log('Si puedes comprar');
} else {
    console.log('No, no puedes comprar');
}

Mensajes de error mas utiles

Decir solo «no puedes comprar» no ayuda a nadie. Anadiendo else if puedes explicar que falta. Para ello se usa el operador de negacion !, que invierte una condicion:

Diagnostico especifico

const usuario = true;
const puedePagar = false;

if (usuario && puedePagar) {
    console.log('Si puedes comprar');
} else if (!usuario) {
    console.log('Inicia sesion o crea una cuenta');
} else if (!puedePagar) {
    console.log('Fondos insuficientes');
} else {
    console.log('No, no puedes comprar');
}

⚠ De nuevo: el orden

Si colocaras else if (!usuario) antes de else if (!puedePagar) en un caso donde falten las dos cosas, solo veras el primer mensaje. Como siempre, se ejecuta la primera condicion que se cumple.

10.6 El operador `||` (OR): al menos una

Al contrario que &&, con || basta con que una sola condicion se cumpla.

Tres formas de pagar

const efectivo = 300;
const credito = 400;
const disponible = efectivo + credito;
const totalAPagar = 600;

if (efectivo >= totalAPagar || credito >= totalAPagar || disponible >= totalAPagar) {
    console.log('Si podemos pagar');
} else {
    console.log('Fondos insuficientes');
}

Ni el efectivo ni el credito por separado llegan a 600, pero disponible vale 700: con que una condicion se cumpla, se ejecuta el bloque.

Operador	Se cumple cuando	Caso tipico
`&&` (AND)	Todas las condiciones son verdaderas	Requisitos obligatorios simultaneos
`\|\|` (OR)	Al menos una condicion es verdadera	Validar formularios: si algun campo esta vacio, avisar
`!` (NOT)	Invierte el valor de la condicion	Comprobar que algo no se cumple

💡 Cual se usa mas

En la practica, || aparece mas que &&. El caso estrella es la validacion de formularios: si el nombre esta vacio o el email esta vacio o el mensaje esta vacio, avisa de que todos los campos son obligatorios.

10.7 Cortar la ejecucion con `return`

A mucha gente no le gusta encadenar else if. Una alternativa habitual es escribir varios if independientes y cortar la funcion en cuanto uno se cumpla.

Sin return: se ejecutan los dos

const puntaje = 450;

if (puntaje > 400) {
    console.log('Excelente');
}

if (puntaje > 300) {
    console.log('Buen puntaje, felicidades');
}

Con return: solo el primero

const puntaje = 450;

function revisarPuntaje() {
    if (puntaje > 400) {
        console.log('Excelente');
        return;     // se sale de la funcion: lo demas no se ejecuta
    }

    if (puntaje > 300) {
        console.log('Buen puntaje, felicidades');
    }
}

revisarPuntaje();

⚠ return solo funciona dentro de una funcion

Por eso el ejemplo esta envuelto en revisarPuntaje(). Fuera de una funcion, return produce un error de sintaxis.

✓ Esto es codigo del mundo real

El patron «comprueba, y si algo falla sal inmediatamente» se llama return temprano y es lo que veras en proyectos profesionales, sobre todo en validaciones: comprueba un requisito, si no se cumple avisa y sal; si todo va bien, sigue.

+ Recuerda tambien

Como viste en la Unidad 6, nunca escribas if (autenticado === true). Con un boolean basta if (autenticado), y para negarlo, if (!autenticado).

10.8 El operador ternario

Lo conociste en la Unidad 6. Aqui lo llevamos mas lejos: con condiciones combinadas y anidado.

Version basica

const autenticado = true;

console.log(autenticado ? 'Si esta autenticado' : 'No esta autenticado');

Con dos condiciones

AND y OR dentro de un ternario

const autenticado = true;
const puedePagar = true;

console.log(autenticado && puedePagar ? 'Si puede pagar' : 'No puede pagar');

// Con OR basta con que se cumpla una
console.log(autenticado || puedePagar ? 'Al menos una se cumple' : 'Ninguna se cumple');

Ternario anidado

Igual que puedes meter un if dentro de otro (lo que se llama if anidado), puedes meter un ternario dentro de otro. Es poco comun y hay que usarlo con cuidado:

Un ternario dentro de otro

const autenticado = true;
const puedePagar = false;

console.log(
    autenticado
        ? (puedePagar ? 'Si autenticado y puede pagar' : 'Si autenticado, pero no puede pagar')
        : 'No autenticado'
);

⚠ Con moderacion

Un ternario anidado es valido, pero se lee peor que un if. Usalo solo si el resultado sigue siendo claro de un vistazo; si dudas, escribe un if.

10.9 Ejercicios practicos

Ejercicio 1

Control de acceso

Una persona quiere ver una pelicula. Necesita estar autenticada y tener suscripcion activa. Si falta algo, indica exactamente que falta.

Ver solucion

Solucion

const autenticado = true;
const suscripcionActiva = false;

if (autenticado && suscripcionActiva) {
    console.log('Disfruta la pelicula');
} else if (!autenticado) {
    console.log('Debes iniciar sesion');
} else if (!suscripcionActiva) {
    console.log('Tu suscripcion ha caducado, renuevala');
}

Ejercicio 2

Calificaciones con `else if`

Dada una nota de 0 a 100, muestra: 90 o mas → Excelente; 70 o mas → Aprobado; 50 o mas → Suficiente; por debajo → Reprobado. Cuidado con el orden.

Ver solucion

Solucion

const nota = 85;

if (nota >= 90) {
    console.log('Excelente');
} else if (nota >= 70) {
    console.log('Aprobado');
} else if (nota >= 50) {
    console.log('Suficiente');
} else {
    console.log('Reprobado');
}

El orden es de mayor a menor. Si empezaras por nota >= 50, absolutamente todas las notas aprobadas caerian en «Suficiente».

Reto 1

Del `else if` al `switch`

Reescribe este codigo usando switch. Manten el comportamiento exactamente igual, incluido el caso por defecto.

Punto de partida

const rol = 'editor';

if (rol === 'admin') {
    console.log('Acceso total');
} else if (rol === 'editor') {
    console.log('Puedes publicar y editar');
} else if (rol === 'lector') {
    console.log('Solo puedes leer');
} else {
    console.log('Rol desconocido');
}

Ver solucion

Solucion

const rol = 'editor';

switch (rol) {
    case 'admin':
        console.log('Acceso total');
        break;
    case 'editor':
        console.log('Puedes publicar y editar');
        break;
    case 'lector':
        console.log('Solo puedes leer');
        break;
    default:
        console.log('Rol desconocido');
        break;
}

Se lee mejor porque de un vistazo ves todos los roles posibles. El switch encaja cuando comparas la misma variable contra valores concretos.

Reto 2

Validacion de formulario completa

Escribe una funcion validarFormulario(nombre, email, mensaje) que: avise si algun campo esta vacio y corte la ejecucion con return; avise si el email no contiene @ y corte tambien; y si todo esta bien, confirme el envio.

Ver solucion

Solucion

function validarFormulario(nombre, email, mensaje) {

    // Un solo OR cubre los tres campos
    if (nombre === '' || email === '' || mensaje === '') {
        console.log('Todos los campos son obligatorios');
        return;
    }

    if (!email.includes('@')) {
        console.log('El email no es valido');
        return;
    }

    console.log(`Mensaje de ${nombre} enviado correctamente`);
}

validarFormulario('', 'ana@correo.com', 'Hola');
validarFormulario('Ana', 'anacorreo.com', 'Hola');
validarFormulario('Ana', 'ana@correo.com', 'Hola');

Fijate en la combinacion: || para agrupar los tres campos en una sola condicion, ! para negar el includes (Unidad 3) y return para no seguir evaluando cuando algo ya ha fallado. Este patron es exactamente el que usaras en el proyecto de validacion de formularios del curso.

10.10 Resumen de lo aprendido

if (condicion) { } ejecuta un bloque si la condicion se cumple; else recoge el resto de casos.
Compara con === y !== dentro de las condiciones.
Solo se ejecuta la primera condicion que se cumple. Un if nunca evalua todas.
El orden importa: coloca primero las condiciones mas restrictivas.
switch es mas legible cuando comparas una misma variable contra muchos valores. Cada case necesita su break, y el default es el equivalente del else.
&& exige que se cumplan todas las condiciones; || con una basta; ! invierte una condicion.
return corta la ejecucion de la funcion. Es la base del patron de "return temprano" en validaciones.
El ternario condicion ? a : b resuelve casos simples en una linea. Puede anidarse, pero con moderacion.

10.11 Verificacion de cierre

Se escribir un if / else if / else
Entiendo por que solo se ejecuta la primera condicion que se cumple
Se cuando conviene un switch en lugar de varios else if
Se la diferencia entre && y ||
Se usar ! para negar una condicion
Se cortar la ejecucion de una funcion con return

Con puntaje = 500, ¿que imprime if (puntaje > 300) {...} else if (puntaje > 400) {...}?

Los dos mensajes, porque se cumplen las dos condiciones
Solo el del primer if
Solo el del else if
Ninguno

¿Que pasa si olvidas el break en un case?

Se produce un error de sintaxis
El switch no se ejecuta
Se siguen ejecutando los case posteriores
Salta directamente al default

Para avisar cuando algun campo de un formulario este vacio, ¿que operador usas?

||
&&
===
switch

🏁 Unidad completada

Marcar la Unidad 10 como completada

10.1 El if

Anatomia

El comparador estricto dentro de un if

10.2 Comparar magnitudes en una condicion

10.3 else if: mas de dos caminos

Por que el orden importa

10.4 switch: muchas opciones, un solo valor

Anatomia

10.5 El operador && (AND): todas las condiciones

Mensajes de error mas utiles

10.6 El operador || (OR): al menos una

10.7 Cortar la ejecucion con return

10.8 El operador ternario

Con dos condiciones

Ternario anidado

10.9 Ejercicios practicos

Control de acceso

Calificaciones con else if

Del else if al switch

Validacion de formulario completa

10.10 Resumen de lo aprendido

10.11 Verificacion de cierre

10.1 El `if`

El comparador estricto dentro de un `if`

10.3 `else if`: mas de dos caminos

10.4 `switch`: muchas opciones, un solo valor

10.5 El operador `&&` (AND): todas las condiciones

10.6 El operador `||` (OR): al menos una

10.7 Cortar la ejecucion con `return`

Calificaciones con `else if`

Del `else if` al `switch`