JavaScript if-Else y If-Then: Sentencias condicionales en JS

Artículo original escrito por: Jessica Wilkins
Artículo original: JavaScript If-Else and If-Then – JS Conditional Statements
Traducido y adaptado por: Rafael D. Hernandez

Habrá momentos en los que querrás escribir comandos que manejen diferentes decisiones en tu código.

Por ejemplo, si estás codificando un bot, puedes hacer que responda con diferentes mensajes basados en un conjunto de comandos que recibes.

En este artículo, te explicaré qué es una sentencia if...else es y proporcionaré ejemplos de código. También veremos el operador condicional (ternario) que puede usar como taquigrafía para la sentencia if...else.

¿Qué es una sentencia if...else en JavaScript?

El if...else es un tipo de instrucción condicional que ejecutará un bloque de código cuando la condición de la instrucción if sea veraz truthy. Si la condición es falsa falsy, se ejecutará el bloque else.

Los valores veraces truthy y falsos falsy se convierten en verdaderos true o falsos false en las sentencias if.

if (condicion es verdadera) {
   // el código se ejecuta
} else {
   // el código se ejecuta
}

Cualquier valor que no esté definido como falso falsy se considerará verdadero truthy en JavaScript.

Aquí hay una lista de valores falsos falsy:

• falso
• 0 (cero)
• -0 (cero negativo)
• 0n (BigInt cero)
• "", '', ` `  (cadena vacía)
• nulo
• no definido
• NaN (no es un número)

Ejemplos de sentencias if...else en JavaScript

En este ejemplo, la condición para la instrucción if es verdadera true, por lo que el mensaje impreso en la consola sería "Nick es un adulto."

const edad = 18;

if (edad >= 18) {
  console.log("Nick es un adulto.");
} else {
  console.log("Nick es un ninio.");
}

Pero si cambio la variable de edad a menos de 18, entonces la condición sería falsa false y el código ejecutaría el bloque else en su lugar.

const edad = 12;

if (adad >= 18) {
  console.log("Nick es un adulto.");
} else {
  console.log("Nick es un ninio.");
}

Ejemplos de múltiples condiciones (sentencias if...else if... else) en JavaScript

Habrá momentos en los que desees probar múltiples condiciones. Ahí es donde entra el bloque else if.

if (la condición 1 es verdadera) {
   // el código se ejecuta
} else if (la condición 2 es verdadera) {
  // el código se ejecuta
} else {
   // el código se ejecuta
}

Cuando la sentencia if es falsa false, la computadora pasará a la sentencia else if. Si eso también es falso false, entonces se moverá al bloque else.

En este ejemplo, el bloque else if se ejecutará porque Alice tiene entre 18 y 21 años de edad.

const edad = 18;

if (edad < 18) {
  console.log("Alice es menor de 18 anios.");
} else if (edad >= 18 && edad <= 21) {
  console.log("Alice tiene entre 18 y 21 anios de edad.");
} else {
  console.log("Alice tiene mas de 21 anios.");
}

¿Cuándo usar sentencias switch sobre if...else?

Hay momentos en JavaScript en los que podrías considerar usar una sentencia switch en lugar de una sentencia if else.

Las sentencias switch pueden tener una sintaxis más limpia que las sentencias if else complicadas.

Echale un vistazo al ejemplo a continuación: en lugar de usar esta sentencia larga if else, puedes optar por una sentencia switch más fácil de leer.

const mascota = "perro";

if (mascota === "lagarto") {
  console.log("Tengo un lagarto");
} else if (pet === "dog") {
  console.log("Tego un perro");
} else if (pet === "gato") {
  console.log("Tengo un gato");
} else if (pet === "serpiente") {
  console.log("Tengo una serpiente");
} else if (pet === "Loro") {
  console.log("Tengo un loro");
} else {
  console.log("No tengo mascota");
}

const mascota = "perro";
 
switch (mascota) {
  case "lagarto":
    console.log("Tengo un lagarto");
    break;
  case "perro":
    console.log("Tengo un perro");
    break;
  case "gato":
    console.log("Tengo un gato");
    break;
  case "serpiente":
    console.log("Tengo una serpiente");
    break;
  case "loro":
    console.log("Tengo un loro");
    break;
  default:
    console.log("No tengo mascota");
    break;
}

Las sentencias switch no serán apropiadas para usar en todas las situaciones. Pero si sientes que las sentencias if else son largas y complicadas, entonces una sentencia switch podría ser una opción alternativa.

El operador lógico Y ( && ) y sentencias if...else en JavaScript

En el operador lógico Y (&&), si ambas condiciones son true, se ejecutará el bloque if. Si una o ambas condiciones son falsas, se ejecutará el bloque else.

En este ejemplo, dado que edad es mayor que 16 y la variable poseeCoche es true, se ejecutará el bloque if. El mensaje impreso en la consola será "Jerry es lo suficiente mayor para conducir y tiene su propio coche."

const edad = 17;
const poseeCoche = true;

if (edad >= 16 && poseeCoche) {
  console.log("Jerry es lo suficiente mayor para conducir y tiene su propio coche.");
} else {
  console.log("Jerry no conduce.");
}

Si cambio la variable edad a menos de 16, entonces ambas condiciones ya no son true y el bloque else se ejecutaría en su lugar.

const edad = 13;
const poseeCoche = true;

if (edad >= 16 && poseeCoche) {
  console.log("Jerry es lo suficiente mayor para conducir y tiene su propio coche.");
} else {
  console.log("Jerry no conduce.");
}

El operador lógico O (||) y sentencias if...else en JavaScript

En el operador lógico O (||), si una o ambas condiciones son verdaderas true, entonces se ejecutará el código dentro de la sentencia if.

En este ejemplo, aunque la variable estaEnVenta esté establecida en false, el código dentro del bloque if se ejecutará porque la variable elNovioEstaPagando está establecida en true.

const elNovioEstaPagando = true;
const estaEnVenta = false;

if (elNovioEstaPagando || esEnVenta) {
  console.log("Jesse ira de compras.");
} else {
  console.log("Jesse no ira de compras.");
}

Si tuvieras que cambiar el valor de la variable elNovioEstaPangando a false, entonces el bloque else se ejecutaría porque ambas condiciones son false.

const elNovioEstaPangando = false;
const estaEnVenta = false;

if (elNovioEstaPangando || estaEnVenta) {
  console.log("Jesse ira de compras.");
} else {
  console.log("Jesse no ira de compras.");
}

El NO lógico (!) operador y sentancias if...else en JavaScript

El NO lógico ( !) el operador tomará algo que es true y lo hará false. También tomará algo que es falso y lo hará verdadero.

Podemos modificar el ejemplo anterior para usar el ! operador para hacer la variable elNovioEstaPangando  false. Dado que ambas condiciones son false, se ejecutaría el bloque else.

const elNovioEstaPangando = true;
const estaEnVenta = false;

if (!elNovioEstaPangando || estaEnVenta) {
  console.log("JJesse ira de compras.");
} else {
  console.log("Jesse no ira de compras.");
}

Operador condicional (ternario) en JavaScript

Si tienes una sentencia corta if else, entonces puedes optar por ir con el operador ternario.  La palabra ternario significa algo compuesto de tres partes.

Esta es la sintaxis básica para un operador ternario:

condicion ? if condicion es verdadera : if condicion es falsa

La condición va antes de la ? marca y si es true, entonces el código entre el ? marca y : ejecutaría. Si la condición es false, se ejecutará el código después de :.

En este ejemplo, dado que la edad es mayor de 18 años, el mensaje a la consola sería "Puede votar".

const edad = 32;
const ciudadano = edad >= 18 ? "Puede votar" : "No puede votar";
console.log(ciudadano);

Así es como se vería el código usando una sentencia if else:

const edad = 32;
let ciudadano;

if (edad >= 18) {
  ciudadano = "Puede votar";
} else {
  ciudadano = "No puede votar";
}

console.log(ciudadano);

Conclusion

las sentencias if else ejecutarán un bloque de código cuando la condición de la sentencia if sea veraz truthy. Si la condición es falsa falsy, se ejecutará el bloque else.

Habrá momentos en los que desees probar múltiples condiciones y puedes usar una sentencia if...else if...else.

Si sientes que la sentencia if else es larga y complicada, entonces una sentencia switch podría ser una opción alternativa.

El uso de operadores lógicos para probar varias condiciones puede reemplazar sentencias if else anidadas.

El operador ternario se puede usar para escribir código más corto para una sentencia if else simple.