Las sentencias if y else en JavaScript son la base del control de flujo condicional: te permiten que tu aplicación tome decisiones según se cumpla o no una condición. Aprenderlas es clave si quieres traducir la lógica de negocio a código real, ya sea para validar edades, permisos o estados de sesión.
Piensa en algo cotidiano: antes de salir de casa miras al cielo. Si parece que va a llover, agarras el paraguas. Si no, sales sin él. Esa misma lógica es la que vas a escribir en tu editor.
¿Qué es la sentencia if y cómo funciona en JavaScript?
La palabra if es una palabra reservada del lenguaje, lo que significa que no puedes usarla como nombre de variable ni en otro contexto. Cuando la escribes, le estás diciendo a JavaScript: voy a evaluar una condición y, si se cumple, ejecuta este bloque.
La estructura básica abre paréntesis para la condición y llaves para el bloque de código que se ejecuta cuando esa condición es verdadera [00:38].
¿Qué hace la palabra reservada if? Evalúa una expresión y, si el resultado es verdadero, ejecuta el bloque de código entre llaves. Si es falso, lo salta.
¿Cómo escribir un if else paso a paso?
Vamos a un caso concreto: validar si una persona es mayor de edad para entrar a un área reservada. Crea un archivo 08-ifElse.js dentro de la carpeta src y empieza así.
js
const edad = 18;
if (edad >= 18) {
console.log("Eres mayor de edad");
} else {
console.log("Eres menor de edad");
}
Aquí estás usando el operador >= (mayor o igual) para comparar la constante edad contra el número 18. Si la condición se cumple, entra al primer bloque. Si no, cae en el else [02:30].
Dentro de cada bloque puedes hacer prácticamente lo que quieras: imprimir mensajes, ejecutar más lógica, retornar valores o llamar a otras funciones. Esa flexibilidad es lo que te permite modelar reglas reales del negocio.
¿Cuándo usar else if para evaluar varias condiciones?
El else if te sirve cuando necesitas evaluar más de un caso intermedio antes de caer en el else final. Es decir, una condición adicional que también podría ser verdadera y desencadenar su propia acción.
Mira cómo queda la estructura agregando un caso para detectar exactamente la edad de 18.
js
const edad = 19;
if (edad >= 19) {
console.log("Eres mayor de edad");
} else if (edad === 18) {
console.log("Tienes 18 años");
} else {
console.log("Eres menor de edad");
}
Fíjate en el operador ===: es una comparación estricta que valida tipo y valor al mismo tiempo. Por eso, si edad es exactamente el número 18, entra al bloque del else if con el mensaje de bienvenida [04:50].
¿Cuál es la diferencia entre else y else if? El else se ejecuta cuando ninguna condición previa fue verdadera. El else if agrega una nueva condición intermedia que se evalúa solo si la anterior falló.
¿Cómo se evalúa el flujo cuando hay varios else if?
JavaScript revisa las condiciones en orden, de arriba hacia abajo. En cuanto encuentra una que se cumple, ejecuta su bloque y se salta el resto. Por eso el orden importa.
Si cambias edad a 19, entra en el primer if porque cumple edad >= 19. Si la cambias a 18, falla el primero pero acierta el else if. Y si pones un valor menor, llega hasta el else final.
Primer if: condición principal y más restrictiva.
else if: condiciones intermedias que se evalúan en cascada.
else: caso por defecto cuando ninguna anterior se cumplió.
Este patrón aplica para cualquier regla, no solo edad: permisos de usuario, estado de sesión, tipo de plan o cualquier validación que tu modelo de negocio necesite.
¿Conviene anidar muchos if dentro de otros if?
Puedes anidar tantos if como quieras, pero no siempre es lo más limpio ni lo más mantenible. Cuando la lógica empieza a crecer en niveles, el código se vuelve difícil de leer y de depurar [06:30].
Una buena práctica es preguntarte si realmente necesitas todos esos niveles o si puedes refactorizar usando estructuras alternativas. Más adelante existen otras formas para manejar mejor este flujo, como switch o early returns, que ayudan a mantener el código plano y legible.
¿Puedo poner if dentro de otro if? Sí, JavaScript permite anidar condicionales sin límite estricto, pero abusar de eso afecta la legibilidad y la mantenibilidad del código.
Palabras clave que vale la pena que retengas: palabra reservada, operador relacional (>=), operador de igualdad estricta (===), bloque de código entre llaves y flujo de control condicional. Con esos cinco conceptos cubres el 90% de lo que necesitas para empezar a escribir lógica de negocio en JavaScript.
¿Cómo resolverías una validación de permisos con if, else if y else? Comparte tu solución en los comentarios.
Para que el else if se cumpla en el ejemplo la condicion debe de cambiar el operador logico de >= mayor ó igual a > mayor que.
mi funcion
// ============================================// Reto: If, else y else if en JavaScript// ============================================// Practica el control de flujo condicional con if, else y else if.// Valida reglas de negocio como mayoría de edad, permisos y umbrales de acceso.// Ejecuta los tests con: npx vitest src/09-if-else// ============================================// --- Reto 1: Condición simple (mayor de edad) ---// Recibe "edad" (número). Retorna true si edad >= 18, false en caso contrario.// Usa if y else (o solo return de una comparación).functionesMayorDeEdad(edad){if(edad >=18){return(true);}else{return(false);}// Tu código aquí}// --- Reto 2: Mensaje según condición ---// Recibe "edad" (número). Si edad >= 18 retorna 'eres mayor de edad',// si no, retorna 'eres menor de edad'. Usa if y else con return.functionmensajeEdad(edad){if(edad >=18){return("eres mayor de edad");}else{return("eres menor de edad");}// Tu código aquí}// --- Reto 3: else if para caso exacto ---// Recibe "edad" (número). Retorna:// - 'eres mayor de edad' si edad >= 19// - 'Tienes dieciocho años' si edad === 18// - 'eres menor de edad' en cualquier otro caso// Usa if, else if y else. Prioriza la condición más restrictiva primero.functionmensajeEdadDetallado(edad){if(edad >=19){return("eres mayor de edad");}elseif(edad ===18){return("Tienes dieciocho años");}else{return("eres menor de edad");}// Tu código aquí}// --- Reto 4: Validar umbral con >= ---// Recibe "valor" (número) y "minimo" (número).// Retorna true si valor >= minimo, false en caso contrario.functioncumpleMinimo(valor, minimo){if( valor >= minimo){return(true);}else{return(false);}// Tu código aquí}// --- Reto 5: Nivel de acceso por edad ---// Recibe "edad" (número). Retorna un string según el rango:// - 'adulto' si edad >= 19// - 'dieciocho' si edad === 18// - 'menor' si edad < 18// Usa if, else if y else con comparaciones (>=, ===, <).functionnivelAcceso(edad){if(edad >=19){return('adulto');}elseif(edad ===18){return('dieciocho');}else{return('menor');}// Tu código aquí}// --- Reto 6: Acceso con condición (edad o permiso) ---// Recibe "edad" (número) y "tienePermisoEspecial" (booleano).// Retorna true si la persona puede entrar: ya sea edad >= 18 O tiene permiso especial.// Retorna false en caso contrario.functionpuedeEntrar(edad, tienePermisoEspecial){if(edad >=18|| tienePermisoEspecial){return(true);}else{return(false);}// Tu código aquí}module.exports={ esMayorDeEdad, mensajeEdad, mensajeEdadDetallado, cumpleMinimo, nivelAcceso, puedeEntrar,};
// ============================================
// Reto: If, else y else if en JavaScript
// ============================================
// Practica el control de flujo condicional con if, else y else if.
// Valida reglas de negocio como mayoría de edad, permisos y umbrales de acceso.
// Ejecuta los tests con: npx vitest src/09-if-else
// ============================================
// --- Reto 1: Condición simple (mayor de edad) ---
// Recibe "edad" (número). Retorna true si edad >= 18, false en caso contrario.
// Usa if y else (o solo return de una comparación).
function esMayorDeEdad(edad) {
if (edad >= 18) {
return (true);
}
else {
return (false);
} // Tu código aquí
}
// --- Reto 2: Mensaje según condición ---
// Recibe "edad" (número). Si edad >= 18 retorna 'eres mayor de edad',
// si no, retorna 'eres menor de edad'. Usa if y else con return.
function mensajeEdad(edad) {
if (edad >= 18) {
return ("eres mayor de edad");
}
else {
return ("eres menor de edad");
} // Tu código aquí
}
// --- Reto 3: else if para caso exacto ---
// Recibe "edad" (número). Retorna:
// - 'eres mayor de edad' si edad >= 19
// - 'Tienes dieciocho años' si edad === 18
// - 'eres menor de edad' en cualquier otro caso
// Usa if, else if y else. Prioriza la condición más restrictiva primero.
function mensajeEdadDetallado(edad) {
if (edad >= 19) {
return ("eres mayor de edad");
}
else if (edad === 18) {
return ("Tienes dieciocho años");
}
else {
return ("eres menor de edad");
} // Tu código aquí
}
// --- Reto 4: Validar umbral con >= ---
// Recibe "valor" (número) y "minimo" (número).
// Retorna true si valor >= minimo, false en caso contrario.
function cumpleMinimo(valor, minimo) {
if( valor >= minimo){
return (true);
}
else {
return (false);
}// Tu código aquí
}
// --- Reto 5: Nivel de acceso por edad ---
// Recibe "edad" (número). Retorna un string según el rango:
// - 'adulto' si edad >= 19
// - 'dieciocho' si edad === 18
// - 'menor' si edad < 18
// Usa if, else if y else con comparaciones (>=, ===, <).
function nivelAcceso(edad) {
if (edad >= 19) {
return ('adulto');
}
else if (edad === 18){
return ('dieciocho');
}
else{
return ('menor');
} // Tu código aquí
}
// --- Reto 6: Acceso con condición (edad o permiso) ---
// Recibe "edad" (número) y "tienePermisoEspecial" (booleano).
// Retorna true si la persona puede entrar: ya sea edad >= 18 O tiene permiso especial.
// Retorna false en caso contrario.
function puedeEntrar(edad, tienePermisoEspecial) {
if (edad >= 18 || tienePermisoEspecial) {
return (true);
}
else {
return (false);
} // Tu código aquí
}
module.exports = {
esMayorDeEdad,
mensajeEdad,
mensajeEdadDetallado,
cumpleMinimo,
nivelAcceso,
puedeEntrar,
};
Comparto mi código de estos ejercicios
Sé que se puede hacer más corto pero por ser fundamentos quise hacerlo más desarrollado
// ============================================// Reto: If, else y else if en JavaScript// ============================================// Practica el control de flujo condicional con if, else y else if.// Valida reglas de negocio como mayoría de edad, permisos y umbrales de acceso.// Ejecuta los tests con: npx vitest src/09-if-else// ============================================// --- Reto 1: Condición simple (mayor de edad) ---// Recibe "edad" (número). Retorna true si edad >= 18, false en caso contrario.// Usa if y else (o solo return de una comparación).functionesMayorDeEdad(edad){// Tu código aquíif(edad>=18){returntrue;}else{returnfalse;}}console.log(esMayorDeEdad(18));// --- Reto 2: Mensaje según condición ---// Recibe "edad" (número). Si edad >= 18 retorna 'eres mayor de edad',// si no, retorna 'eres menor de edad'. Usa if y else con return.functionmensajeEdad(edad){// Tu código aquíif(edad>=18){return'eres mayor de edad';}else{return'eres menor de edad';}}console.log(mensajeEdad(17));// --- Reto 3: else if para caso exacto ---// Recibe "edad" (número). Retorna:// - 'eres mayor de edad' si edad >= 19// - 'Tienes dieciocho años' si edad === 18// - 'eres menor de edad' en cualquier otro caso// Usa if, else if y else. Prioriza la condición más restrictiva primero.functionmensajeEdadDetallado(edad){// Tu código aquíif(edad>=19){return'eres mayor de edad';}elseif(edad===18){return'Tienes dieciocho años';}else{return'eres menor de edad'}}console.log(mensajeEdadDetallado(16));// --- Reto 4: Validar umbral con >= ---// Recibe "valor" (número) y "minimo" (número).// Retorna true si valor >= minimo, false en caso contrario.functioncumpleMinimo(valor, minimo){// Tu código aquíif(valor>=minimo){returntrue;}else{returnfalse;}}console.log(cumpleMinimo(19,18));// --- Reto 5: Nivel de acceso por edad ---// Recibe "edad" (número). Retorna un string según el rango:// - 'adulto' si edad >= 19// - 'dieciocho' si edad === 18// - 'menor' si edad < 18// Usa if, else if y else con comparaciones (>=, ===, <).functionnivelAcceso(edad){// Tu código aquíif(edad>=19){return'adulto'}elseif(edad===18){return'dieciocho';}else{return'menor';}}console.log(nivelAcceso(16));// --- Reto 6: Acceso con condición (edad o permiso) ---// Recibe "edad" (número) y "tienePermisoEspecial" (booleano).// Retorna true si la persona puede entrar: ya sea edad >= 18 O tiene permiso especial.// Retorna false en caso contrario.functionpuedeEntrar(edad, tienePermisoEspecial){// Tu código aquíif(edad || tienePermisoEspecial){returntrue;}else{returnfalse;}}console.log(puedeEntrar(16,true));module.exports={ esMayorDeEdad, mensajeEdad, mensajeEdadDetallado, cumpleMinimo, nivelAcceso, puedeEntrar,};
function isAdult(age) {
if (age >= 18) {
return true;
} else {
return false;
}
}
console.log(isAdult(20));
// --- Reto 2: Mensaje según condición ---
// Recibe "edad" (número). Si edad >= 18 retorna 'eres mayor de edad',
// si no, retorna 'eres menor de edad'. Usa if y else con return.
function mensajeEdad(edad) {
if (edad >= 18) {
return 'Eres mayor de edad.'
} else {
return 'Eres menor de edad.'
};
}
console.log(mensajeEdad(15)); // Eres menor de edad.
// --- Reto 3: else if para caso exacto ---
// Recibe "edad" (número). Retorna:
// - 'eres mayor de edad' si edad >= 19
// - 'Tienes dieciocho años' si edad === 18
// - 'eres menor de edad' en cualquier otro caso
// Usa if, else if y else. Prioriza la condición más restrictiva primero.
function mensajeEdadDetallado(edad) {
if ( edad === 18 ) {
return 'Tienes dieciocho años'
} else if ( edad >= 19) {
return 'Eres mayor de edad.'
} else {
return 'Eres menor de edad'
};
}
console.log(mensajeEdadDetallado(18));
console.log(mensajeEdadDetallado(25));
console.log(mensajeEdadDetallado(1));
// --- Reto 4: Validar umbral con >= ---
// Recibe "valor" (número) y "minimo" (número).
// Retorna true si valor >= minimo, false en caso contrario.
function cumpleMinimo(valor, minimo) {
if (valor >= minimo) {
return true
} else {
return false
};
}
console.log(cumpleMinimo(20, 15));
console.log(cumpleMinimo(15, 20));
// --- Reto 5: Nivel de acceso por edad ---
// Recibe "edad" (número). Retorna un string según el rango:
// - 'adulto' si edad >= 19
// - 'dieciocho' si edad === 18
// - 'menor' si edad < 18
// Usa if, else if y else con comparaciones (>=, ===, <).
function nivelAcceso(edad) {
if (edad >= 19) {
return 'adulto'
} else if (edad === 18) {
return 'dieciocho';
} else {
return 'menor';
}
}
console.log(nivelAcceso(19));
console.log(nivelAcceso(18));
console.log(nivelAcceso(17));
// --- Reto 6: Acceso con condición (edad o permiso) ---
// Recibe "edad" (número) y "tienePermisoEspecial" (booleano).
// Retorna true si la persona puede entrar: ya sea edad >= 18 O tiene permiso especial.
// Retorna false en caso contrario.
function puedeEntrar(edad, tienePermisoEspecial) {
if (edad >= 18 || tienePermisoEspecial === true) {
return true
} else {
return false
};
}
console.log(puedeEntrar(18, false));
console.log(puedeEntrar(17, false));
// ============================================// Reto: If, else y else if en JavaScript// ============================================// Practica el control de flujo condicional con if, else y else if.// Valida reglas de negocio como mayoría de edad, permisos y umbrales de acceso.// Ejecuta los tests con: npx vitest src/09-if-else// ============================================// --- Reto 1: Condición simple (mayor de edad) ---// Recibe "edad" (número). Retorna true si edad >= 18, false en caso contrario.// Usa if y else (o solo return de una comparación).functionesMayorDeEdad(edad){// Tu código aquíreturn edad >=18;}// --- Reto 2: Mensaje según condición ---// Recibe "edad" (número). Si edad >= 18 retorna 'eres mayor de edad',// si no, retorna 'eres menor de edad'. Usa if y else con return.functionmensajeEdad(edad){// Tu código aquíif(edad >=18){return'eres mayor de edad';}else{return'eres menor de edad';}}// --- Reto 3: else if para caso exacto ---// Recibe "edad" (número). Retorna:// - 'eres mayor de edad' si edad >= 19// - 'Tienes dieciocho años' si edad === 18// - 'eres menor de edad' en cualquier otro caso// Usa if, else if y else. Prioriza la condición más restrictiva primero.functionmensajeEdadDetallado(edad){// Tu código aquíif(edad ===18){return'Tienes dieciocho años';}elseif(edad >=19){return'eres mayor de edad';}else{return'eres menor de edad';}}// --- Reto 4: Validar umbral con >= ---// Recibe "valor" (número) y "minimo" (número).// Retorna true si valor >= minimo, false en caso contrario.functioncumpleMinimo(valor, minimo){// Tu código aquíreturn valor >= minimo;}// --- Reto 5: Nivel de acceso por edad ---// Recibe "edad" (número). Retorna un string según el rango:// - 'adulto' si edad >= 19// - 'dieciocho' si edad === 18// - 'menor' si edad < 18// Usa if, else if y else con comparaciones (>=, ===, <).functionnivelAcceso(edad){// Tu código aquíif(edad ===18){return'dieciocho';}elseif(edad >=19){return'adulto';}elseif(edad <18){return'menor';}}// --- Reto 6: Acceso con condición (edad o permiso) ---// Recibe "edad" (número) y "tienePermisoEspecial" (booleano).// Retorna true si la persona puede entrar: ya sea edad >= 18 O tiene permiso especial.// Retorna false en caso contrario.functionpuedeEntrar(edad, tienePermisoEspecial){// Tu código aquíif(edad >=18|| tienePermisoEspecial){returntrue;}else{returnfalse;}}module.exports={ esMayorDeEdad, mensajeEdad, mensajeEdadDetallado, cumpleMinimo, nivelAcceso, puedeEntrar,};
