Explicando los condicionales if else en JavaScript

Última actualización: 01 - 11 - 2023

¿Qué es un condicional en programación?

Las condicionales son estructuras de control o de flujo de los datos que estemos manejando en nuestro algoritmo. En este caso estamos hablando del if else de JavaScript. Como su nombre lo indica, un dato debe cumplir una condición para ejecutar cierto código.

De hecho es bastante intuitivo, la palabra if significa si condicional en inglés y else significa si no. A modo de pseudocódigo se puede ver así:

Si(esta condición se cumple){
Este código se ejecuta;
}Si no{
Se ejecuta este código;
}
//Lo que está entre paréntesis es el dato que debe cumplir la condición

Ahora con un ejemplo real sencillo:

if(10 > 5){
console.log("Esta condición se cumple");
}else{
console.log("Esta condición no se cumple");
}
//Si 10 es mayor a 5, se imprime que la condición se cumple. Si 10 no fuese mayor a 5, se imprime que la condición no se cumple

¿Cómo escribir un if else en JavaScript?

Sintaxis

Para escribir una condicional en JavaScript se debe iniciar con la palabra reservada if seguido de la condición a evaluar dentro de paréntesis. JavaScript utiliza corchetes para abrir y cerrar líneas de código ( { } ); debes considerar también que las condiciones se evalúan en true por defecto a no ser que le indiques lo contrario.

Si quieres evaluar una segunda condición contraria, se usa else pero no se indica la condición dentro de paréntesis.

Ejemplo

if(true){
console.log("Condición evaluada en true");
}else{
console.log("Se imprimirá este mensaje si la condición es false");
}

If else if

¿Cómo evaluar diferentes condiciones?

A esto se le conoce como condicionales anidados y no es más que una declaración de múltiples if else si tenemos más de dos condiciones por evaluar.

Ejemplo de condicionales anidados

let minasDeMoria = true;
let pasoDeCahradras = true;
let rodearIsengard = false;

if(minasDeMoria){
console.log("Sucede lo acontecido en la saga del Señor de los Anillos");
} else if(pasoDeCahradras){
console.log("Gandalf no se cae y no regresa tan OP");
} else if(rodearIsengard){
console.log("No es muy buena idea");
} else{
console.log("Boromir igual se muere");
}

En este caso estamos evaluando tres condiciones, dos en true y uno en false por razones didácticas. En este código de ejemplo la condición que se va a ejecutar es la primera, minasDeMoria, porque es true. No hace falta indicar dentro de la condición que esta variable es verdadera (minasDeMoria === true) porque en sí la variable ya almacena el valor booleano.

Si la primera variable fuera false entonces se ejecuta la segunda opción (pasoDeCahradras).

Y si todas las opciones fueran false... Pobre de Boromir.

Las condiciones anidadas pueden ser complicadas de leer si hay más opciones a evaluar y es aquí donde entran en juego los operadores lógicos a facilitarnos esta tarea. También están los controles de flujo con switch pero eso lo veremos luego.

If or (||) If and (&&)

Los operadores lógicos nos ayudan a evaluar dos o más opciones dentro de un mismo bloque de condición y por ende a reducir las líneas de código a escribir, veamos un par de ejemplos.

if(20 > 10 || 20 < 30){
console.log("20 es mayor a 10");
}

El operador lógico or va a tomar el primer valor verdadero dentro de la condición. En este caso 20 > 10; si esto no fuera así tomaría el segundo valor y en caso de que ambos fueran false ejecutaría el else en caso de tenerlo.

Otro detalle: los bloques de código condicional aceptan otros operadores para poder evaluar.

Mayor que >
Menor que <
Mayor o igual a >=
Menor o igual a <=
Igual a ==
Estrictamente igual a ===
Desigual !=
Estrictamente desigual !==
Not !true
Not !false

Ahora el mismo ejemplo con el operador and.

if (20 >= 10 && 20 <= 30){
console.log("20 es mayor a 10 y es menor que 30");
}

A diferencia del or, el operador and va a evaluar que ambas condiciones se cumplan para ejecutar el código. En este caso se cumple.

Si una de las dos opciones no se cumple entonces la evaluación saltaría a un else en caso de tenerlo. Y si ninguna se cumple sucede el mismo caso.

El operador ternario de JavaScript

El operador ternario es un forma "resumida" de escribir una condicional if else.

Su sintaxis es bastante sencilla y permite escribir un bloque condicional en una sola línea.

Sintaxis del operador ternario

condición ? console.log("El if es reemplazado por el signo de interrogación") : console.log("El else es reemplazado por los dos puntos")

Veámoslo con un ejemplo común:

// Sintaxis if else
let flechasDeLegolas = 60;

if(flechasDeLegolas > 60){
console.log("Poder del guión de la película");
}else{
console.log("Él recogía las flechas de sus enemigos");
}

// Sintaxis con operador ternario
flechasDeLegolas > (60) ? console.log("Poder del guión de la película") : console.log("Él recogía las flechas de sus enemigos");

Espero que con esto te haya quedado más claro cómo funciona el if else de JavaScript. También te invito a que me escribas a través de mis redes si este aporte te ha servido de ayuda, si no has entendido o si también eres fan del Señor de los Anillos.😆