Tomando decisiones en tu código — condicionales

¡Puedes tenerlo con una condición!

Los seres humanos (y otros animales) tomamos decisiones todo el tiempo que afectan nuestras vidas, desde pequeñas ("¿debería comer una galleta o dos?") hasta grandes ("¿debería quedarme en mi país y trabajar en la granja familiar, o mudarme a Estados Unidos a estudiar astrofísica?")

Las sentencias condicionales nos permiten representar esa toma de decisiones en JavaScript, desde la elección que debe hacerse (por ejemplo, "una galleta o dos"), hasta el resultado de esas elecciones (quizá el resultado de "me comí una galleta" sea "me quedé con hambre", y el resultado de "me comí dos galletas" sea "quedé satisfecho, pero mamá me regañó por comerme todas las galletas".)

Sentencias if...else

Veamos el tipo de sentencia condicional más común que usarás en JavaScript — por mucho, la humilde sentencia if...else.

Sintaxis básica de if...else

La sintaxis básica de if...else se ve así:

if (condition) {
  /* código que se ejecuta si la condición es true */
} else {
  /* en su lugar, ejecuta otro código */
}

Aquí tenemos:

1. La palabra clave if seguida de unos paréntesis.
2. Una condición a probar, colocada dentro de los paréntesis (normalmente "¿es este valor mayor que este otro valor?" o "¿existe este valor?"). La condición usa los operadores de comparación que vimos antes en este módulo y devuelve true o false.
3. Un par de llaves, dentro de las cuales tenemos código — puede ser el código que queramos, y solo se ejecuta si la condición devuelve true.
4. La palabra clave else.
5. Otro par de llaves, dentro de las cuales tenemos más código — puede ser el código que queramos, y solo se ejecuta si la condición no es true — o en otras palabras, si la condición es false.

Este código es bastante legible para un humano — dice "si la condición devuelve true, ejecuta el código A, si no (else), ejecuta el código B".

Debes saber que no es obligatorio incluir el else y el segundo bloque de llaves — el siguiente código también es perfectamente válido:

if (condition) {
  /* código que se ejecuta si la condición es true */
}

/* ejecuta otro código */

Sin embargo, aquí hay que tener cuidado — en este caso, el segundo bloque de código no está controlado por la sentencia condicional, así que siempre se ejecuta, sin importar si la condición devuelve true o false. Esto no es necesariamente malo, pero puede que no sea lo que quieres — a menudo querrás ejecutar un bloque de código o el otro, no ambos.

Como punto final, aunque no es recomendable, a veces verás sentencias if...else escritas sin llaves:

if (condition) doSomething();
else doSomethingElse();

Esta sintaxis es perfectamente válida, pero es mucho más fácil entender el código si usas las llaves para delimitar los bloques, y varias líneas con indentación.

Un ejemplo real

Para entender mejor esta sintaxis, consideremos un ejemplo real. Imagina a una niña o un niño a quien su madre o padre le pide ayuda con una tarea del hogar, diciéndole: "¡Oye, cariño! Si me ayudas yendo a hacer las compras, te doy una mesada extra para que te alcance para ese juguete que querías." En JavaScript, podríamos representarlo así:

let shoppingDone = false;
let childAllowance;

if (shoppingDone === true) {
  childAllowance = 10;
} else {
  childAllowance = 5;
}

Este código, tal como está, siempre da como resultado que la variable shoppingDone devuelva false, lo que significa una decepción para nuestra pobre criatura. Dependería de nosotros proporcionar un mecanismo para que la variable shoppingDone se establezca en true si las compras se hicieron.

else if

El ejemplo anterior nos dio dos opciones, o resultados — pero ¿y si queremos más de dos?

Hay una manera de encadenar opciones/resultados extra a tu if...else — usando else if. Cada opción extra requiere un bloque adicional entre if () { } y else { } — mira el siguiente ejemplo más elaborado, que podría ser parte de una aplicación sencilla de pronóstico del clima:

<label for="weather">Selecciona el clima de hoy: </label>
<select id="weather">
  <option value="">--Elige una opción--</option>
  <option value="sunny">Soleado</option>
  <option value="rainy">Lluvioso</option>
  <option value="snowing">Nevando</option>
  <option value="overcast">Nublado</option>
</select>

<p></p>

const select = document.querySelector("select");
const para = document.querySelector("p");

select.addEventListener("change", setWeather);

function setWeather() {
  const choice = select.value;

  if (choice === "sunny") {
    para.textContent =
      "Hoy hace un día lindo y soleado. ¡Ponte pantalones cortos! Ve a la playa o al parque y cómprate un helado.";
  } else if (choice === "rainy") {
    para.textContent =
      "Afuera llueve; llévate un impermeable y un paraguas, y no te quedes fuera mucho tiempo.";
  } else if (choice === "snowing") {
    para.textContent =
      "Está cayendo la nieve — ¡hace un frío que congela! Lo mejor es quedarse en casa con una taza de chocolate caliente, o salir a hacer un muñeco de nieve.";
  } else if (choice === "overcast") {
    para.textContent =
      "No llueve, pero el cielo está gris y sombrío; podría cambiar en cualquier momento, así que lleva un impermeable por si acaso.";
  } else {
    para.textContent = "";
  }
}

1. Aquí tenemos un elemento HTML <select> que nos permite elegir distintas opciones de clima, y un párrafo sencillo.
2. En el JavaScript, guardamos una referencia tanto al elemento <select> como al <p>, y agregamos un detector de eventos al elemento <select> para que, cuando su valor cambie, se ejecute la función setWeather().
3. Cuando esta función se ejecuta, primero asignamos a una variable llamada choice el valor actualmente seleccionado en el elemento <select>. Luego usamos una sentencia condicional para mostrar distintos textos dentro del párrafo dependiendo del valor de choice. Fíjate cómo todas las condiciones se prueban en bloques else if () { }, excepto la primera, que se prueba en un bloque if () { }.
4. La última opción, dentro del bloque else { }, es básicamente una opción de "último recurso" — el código dentro de ella se ejecutará si ninguna de las condiciones es true. En este caso, sirve para vaciar el texto del párrafo si no hay nada seleccionado, por ejemplo, si el usuario decide volver a seleccionar la opción de relleno "--Elige una opción--" mostrada al principio.

Una nota sobre los operadores de comparación

Los operadores de comparación se usan para probar las condiciones dentro de nuestras sentencias condicionales. Vimos por primera vez los operadores de comparación en el artículo Matemáticas básicas en JavaScript — números y operadores. Nuestras opciones son:

• === y !== — prueban si un valor es idéntico, o no idéntico, a otro.
• < y > — prueban si un valor es menor o mayor que otro.
• <= y >= — prueban si un valor es menor o igual, o mayor o igual, que otro.

Queremos hacer una mención especial sobre las pruebas de valores booleanos (true/false), y un patrón común con el que te encontrarás una y otra vez. Cualquier valor que no sea false, undefined, null, 0, NaN o una cadena vacía ('') en realidad devuelve true cuando se prueba como sentencia condicional, por lo tanto puedes usar el nombre de una variable por sí solo para probar si es true, o incluso si existe (es decir, que no es undefined). Por ejemplo:

let cheese = "Cheddar";

if (cheese) {
  console.log("¡Sí! Hay queso para hacer pan tostado con queso.");
} else {
  console.log("Hoy no hay pan tostado con queso para ti.");
}

Y, volviendo a nuestro ejemplo anterior de la criatura que ayuda con las tareas del hogar, podrías escribirlo así:

let shoppingDone = false;
let childAllowance;

// No necesitamos especificar 'shoppingDone === true' explícitamente
if (shoppingDone) {
  childAllowance = 10;
} else {
  childAllowance = 5;
}

Anidar if...else

Es perfectamente válido poner una sentencia if...else dentro de otra — anidarlas. Por ejemplo, podríamos actualizar nuestra aplicación de pronóstico del clima para mostrar otro conjunto de opciones dependiendo de la temperatura:

if (choice === "sunny") {
  if (temperature < 86) {
    para.textContent = `Afuera hay ${temperature} grados — agradable y soleado. Vamos a la playa, o al parque, y comamos un helado.`;
  } else if (temperature >= 86) {
    para.textContent = `Afuera hay ${temperature} grados — ¡MUCHO CALOR! Si quieres salir, asegúrate de ponerte protector solar.`;
  }
}

Aunque todo el código funciona en conjunto, cada sentencia if...else funciona de manera completamente independiente de la otra.

Operadores lógicos: AND, OR y NOT

Si quieres probar múltiples condiciones sin escribir sentencias if...else anidadas, los operadores lógicos pueden ayudarte. Cuando se usan en condiciones, los primeros dos hacen lo siguiente:

• && — AND; te permite encadenar dos o más expresiones de modo que todas ellas tengan que evaluarse individualmente como true para que la expresión completa devuelva true.
• || — OR; te permite encadenar dos o más expresiones de modo que una o más de ellas tengan que evaluarse individualmente como true para que la expresión completa devuelva true.

Para darte un ejemplo de AND, el fragmento del ejemplo anterior puede reescribirse así:

if (choice === "sunny" && temperature < 86) {
  para.textContent = `Afuera hay ${temperature} grados — agradable y soleado. Vamos a la playa, o al parque, y comamos un helado.`;
} else if (choice === "sunny" && temperature >= 86) {
  para.textContent = `Afuera hay ${temperature} grados — ¡MUCHO CALOR! Si quieres salir, asegúrate de ponerte protector solar.`;
}

Así, por ejemplo, el primer bloque de código solo se ejecutará si choice === 'sunny' y temperature < 86 devuelven true.

Veamos un ejemplo rápido de OR:

if (iceCreamVanOutside || houseStatus === "on fire") {
  console.log("Deberías salir de la casa rápido.");
} else {
  console.log("Entonces mejor quédate en casa.");
}

El último tipo de operador lógico, NOT, expresado por el operador !, puede usarse para negar una expresión. Combinémoslo con OR en el ejemplo anterior:

if (!(iceCreamVanOutside || houseStatus === "on fire")) {
  console.log("Entonces mejor quédate en casa.");
} else {
  console.log("Deberías salir de la casa rápido.");
}

En este fragmento, si la sentencia OR devuelve true, el operador NOT la negará de modo que la expresión completa devuelva false.

Puedes combinar tantas sentencias lógicas como quieras, en la estructura que quieras. El siguiente ejemplo ejecuta el código de adentro solo si ambas sentencias OR devuelven true, lo que significa que la sentencia AND completa devolverá true:

if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === "Steve")) {
  // ejecuta el código
}

Un error común al usar el operador lógico OR en sentencias condicionales es intentar escribir una sola vez la variable cuyo valor estás comprobando, y luego dar una lista de valores que podría tener para devolver true, separados por operadores || (OR). Por ejemplo:

if (x === 5 || 7 || 10 || 20) {
  // ejecuta mi código
}

En este caso, la condición dentro de if () siempre se evaluará como true, ya que 7 (o cualquier otro valor distinto de cero) siempre se evalúa como true. Esta condición en realidad dice "si x es igual a 5, o 7 es true — lo cual siempre lo es". ¡Lógicamente esto no es lo que queremos! Para que funcione, tienes que especificar una prueba completa a cada lado de cada operador OR:

if (x === 5 || x === 7 || x === 10 || x === 20) {
  // ejecuta mi código
}

Sentencias switch

Las sentencias if...else cumplen bien la función de habilitar código condicional, pero no están exentas de desventajas. Son buenas principalmente para casos en los que tienes un par de opciones, y cada una requiere una cantidad razonable de código a ejecutar, y/o las condiciones son complejas (por ejemplo, múltiples operadores lógicos). Para los casos en los que solo quieres asignar a una variable un valor de entre varias opciones, o imprimir un mensaje en particular dependiendo de una condición, la sintaxis puede ser algo engorrosa, especialmente si tienes un número grande de opciones.

En esos casos, las sentencias switch son tus amigas — toman una sola expresión/valor como entrada, y luego recorren varias opciones hasta encontrar una que coincida con ese valor, ejecutando el código correspondiente. Aquí hay más pseudocódigo, para darte una idea:

switch (expression) {
  case choice1:
    // ejecuta este código
    break;

  case choice2:
    // en su lugar, ejecuta este código
    break;

  // incluye tantos cases como quieras

  default:
    // de hecho, simplemente ejecuta este código
    break;
}

Aquí tenemos:

1. La palabra clave switch, seguida de un par de paréntesis.
2. Una expresión o valor dentro de los paréntesis.
3. La palabra clave case, seguida de una opción que la expresión/valor podría ser, seguida de dos puntos.
4. Código a ejecutar si la opción coincide con la expresión.
5. Una sentencia break, seguida de punto y coma. Si la opción anterior coincide con la expresión/valor, el navegador deja de ejecutar el bloque de código aquí y continúa con el código que aparezca debajo de la sentencia switch.
6. Tantos otros cases (puntos 3–5) como quieras.
7. La palabra clave default, seguida exactamente del mismo patrón de código que uno de los cases (puntos 3–5), excepto que default no lleva una opción después, y no necesita la sentencia break, ya que de todos modos no hay nada que ejecutar después en el bloque. Esta es la opción predeterminada que se ejecuta si ninguna de las opciones coincide.

Un ejemplo de switch

Veamos un ejemplo real — reescribiremos nuestra aplicación de pronóstico del clima para usar una sentencia switch en su lugar:

<label for="weather">Selecciona el clima de hoy: </label>
<select id="weather">
  <option value="">--Elige una opción--</option>
  <option value="sunny">Soleado</option>
  <option value="rainy">Lluvioso</option>
  <option value="snowing">Nevando</option>
  <option value="overcast">Nublado</option>
</select>

<p></p>

const select = document.querySelector("select");
const para = document.querySelector("p");

select.addEventListener("change", setWeather);

function setWeather() {
  const choice = select.value;

  switch (choice) {
    case "sunny":
      para.textContent =
        "Hoy hace un día lindo y soleado. ¡Ponte pantalones cortos! Ve a la playa o al parque y cómprate un helado.";
      break;
    case "rainy":
      para.textContent =
        "Afuera llueve; llévate un impermeable y un paraguas, y no te quedes fuera mucho tiempo.";
      break;
    case "snowing":
      para.textContent =
        "Está cayendo la nieve — ¡hace un frío que congela! Lo mejor es quedarse en casa con una taza de chocolate caliente, o salir a hacer un muñeco de nieve.";
      break;
    case "overcast":
      para.textContent =
        "No llueve, pero el cielo está gris y sombrío; podría cambiar en cualquier momento, así que lleva un impermeable por si acaso.";
      break;
    default:
      para.textContent = "";
  }
}

Operador ternario

Hay una última pieza de sintaxis que queremos presentarte antes de ponerte a jugar con algunos ejemplos. El operador ternario o condicional es una pequeña pieza de sintaxis que prueba una condición y devuelve un valor/expresión si es true, y otro si es false — puede ser útil en algunas situaciones, y ocupa mucho menos código que un bloque if...else si tienes dos opciones entre las que se elige mediante una condición true/false. El pseudocódigo se ve así:

condition ? ejecuta este código : en su lugar, ejecuta este otro código

Así que veamos un ejemplo:

const greeting = isBirthday
  ? "Feliz cumpleaños, Sra. Smith — ¡esperamos que tenga un gran día!"
  : "Buenos días, Sra. Smith.";

Aquí tenemos una variable llamada isBirthday — si es true, le damos a nuestra invitada un mensaje de feliz cumpleaños; si no, le damos el saludo diario habitual.

Ejemplo del operador ternario

El operador ternario no sirve solo para asignar valores a variables; también puedes ejecutar funciones, o líneas de código — lo que quieras. El siguiente ejemplo en vivo muestra un selector de tema sencillo donde el estilo del sitio se aplica usando un operador ternario.

<label for="theme">Selecciona un tema: </label>
<select id="theme">
  <option value="white">Blanco</option>
  <option value="black">Negro</option>
</select>

<h1>Este es mi sitio web</h1>

const select = document.querySelector("select");
const html = document.querySelector("html");
document.body.style.padding = "10px";

function update(bgColor, textColor) {
  html.style.backgroundColor = bgColor;
  html.style.color = textColor;
}

select.addEventListener("change", () =>
  select.value === "black"
    ? update("black", "white")
    : update("white", "black"),
);

Aquí tenemos un elemento <select> para elegir un tema (negro o blanco), más un sencillo h1 para mostrar el título de un sitio web. También tenemos una función llamada update(), que recibe dos colores como parámetros (entradas). El color de fondo del sitio se establece con el primer color proporcionado, y el color del texto con el segundo.

Finalmente, también tenemos un detector de eventos onchange que sirve para ejecutar una función que contiene un operador ternario. Comienza con una condición de prueba — select.value === 'black'. Si devuelve true, ejecutamos la función update() con parámetros de negro y blanco, lo que significa que terminamos con un color de fondo negro y un color de texto blanco. Si devuelve false, ejecutamos la función update() con parámetros de blanco y negro, lo que significa que los colores del sitio se invierten.

Implementación de un calendario básico

En este ejemplo, nos vas a ayudar a terminar una aplicación básica de calendario. En el código tienes:

• Un elemento <select> para permitir al usuario elegir entre distintos meses.
• Un manejador del evento change para detectar cuándo cambia el valor seleccionado en el menú <select>.
• Una función llamada createCalendar() que dibuja el calendario y muestra el mes correcto en el elemento h1.

Para completar el ejemplo:

1. Haz clic en "Play" en el bloque de código de abajo para editar el ejemplo en el MDN Playground.
2. Escribe una sentencia condicional dentro de la función createCalendar(), justo debajo del comentario // AGREGA EL CONDICIONAL AQUÍ. Debe:
   1. Mirar el mes seleccionado (almacenado en la variable choice. Este será el valor del elemento <select> después de que cambie, por ejemplo "January").
   2. Asignar a la variable days el número de días del mes seleccionado. Para esto tendrás que buscar cuántos días tiene cada mes del año. Puedes ignorar los años bisiestos para los fines de este ejemplo.

Pistas:

• Te recomendamos usar el OR lógico para agrupar varios meses en una sola condición; muchos de ellos comparten el mismo número de días.
• Piensa qué número de días es el más común y úsalo como valor predeterminado.

Si cometes un error, puedes limpiar tu trabajo con el botón Reset del MDN Playground. Si te quedas realmente atascado, puedes ver la solución debajo de la salida en vivo.

<label for="month">Selecciona un mes: </label>
<select id="month">
  <option value="January">Enero</option>
  <option value="February">Febrero</option>
  <option value="March">Marzo</option>
  <option value="April">Abril</option>
  <option value="May">Mayo</option>
  <option value="June">Junio</option>
  <option value="July">Julio</option>
  <option value="August">Agosto</option>
  <option value="September">Septiembre</option>
  <option value="October">Octubre</option>
  <option value="November">Noviembre</option>
  <option value="December">Diciembre</option>
</select>

<h1></h1>

<ul></ul>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

* {
  box-sizing: border-box;
}

ul {
  padding-left: 0;
}

li {
  display: block;
  float: left;
  width: 25%;
  border: 2px solid white;
  padding: 5px;
  height: 40px;
  background-color: #4a2db6;
  color: white;
}

const select = document.querySelector("select");
const list = document.querySelector("ul");
const h1 = document.querySelector("h1");

select.addEventListener("change", () => {
  const choice = select.value;
  createCalendar(choice);
});

function createCalendar(month) {
  let days = 31;

  // AGREGA EL CONDICIONAL AQUÍ

  list.textContent = "";
  h1.textContent = month;
  for (let i = 1; i <= days; i++) {
    const listItem = document.createElement("li");
    listItem.textContent = i;
    list.appendChild(listItem);
  }
}

select.value = "January";
createCalendar("January");

const select = document.querySelector("select");
const list = document.querySelector("ul");
const h1 = document.querySelector("h1");

select.addEventListener("change", () => {
  const choice = select.value;
  createCalendar(choice);
});

function createCalendar(month) {
  let days = 31;

  if (month === "February") {
    days = 28;
  } else if (
    month === "April" ||
    month === "June" ||
    month === "September" ||
    month === "November"
  ) {
    days = 30;
  }

  list.textContent = "";
  h1.textContent = month;
  for (let i = 1; i <= days; i++) {
    const listItem = document.createElement("li");
    listItem.textContent = i;
    list.appendChild(listItem);
  }
}

select.value = "January";
createCalendar("January");

Agregar más opciones de color

En este ejemplo, vas a tomar el ejemplo del operador ternario que vimos antes y convertir el operador ternario en una sentencia switch que nos permita aplicar más opciones al sitio web. Mira el <select> — esta vez verás que no tiene dos opciones de tema, sino cinco.

Para completar el ejemplo:

1. Haz clic en "Play" en el bloque de código de abajo para editar el ejemplo en el MDN Playground.
2. Agrega una sentencia switch justo debajo del comentario // AGREGA LA SENTENCIA SWITCH:
   1. Debe aceptar la variable choice como su expresión de entrada.
   2. En cada case, la opción debe ser igual a uno de los posibles valores de <option> que pueden seleccionarse, es decir, white, black, purple, yellow o psychedelic. Toma en cuenta que los valores de las opciones están en minúsculas, mientras que las etiquetas de las opciones, como se muestran en la salida en vivo, van con mayúscula inicial. En tu código debes usar los valores en minúsculas.
   3. En cada case, debe ejecutarse la función update(), pasándole dos valores de color: el primero para el color de fondo y el segundo para el color del texto. Recuerda que los valores de color son cadenas, así que deben ir entre comillas.

Si cometes un error, puedes limpiar tu trabajo con el botón Reset del MDN Playground. Si te quedas realmente atascado, puedes ver la solución debajo de la salida en vivo.

<label for="theme">Selecciona un tema: </label>
<select id="theme">
  <option value="white">Blanco</option>
  <option value="black">Negro</option>
  <option value="purple">Morado</option>
  <option value="yellow">Amarillo</option>
  <option value="psychedelic">Psicodélico</option>
</select>

<h1>Este es mi sitio web</h1>

html {
  font-family: sans-serif;
  height: 95%;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  height: inherit;
}

const select = document.querySelector("select");
const html = document.querySelector("html");

select.addEventListener("change", () => {
  const choice = select.value;

  // AGREGA LA SENTENCIA SWITCH
});

function update(bgColor, textColor) {
  html.style.backgroundColor = bgColor;
  html.style.color = textColor;
}

const select = document.querySelector("select");
const html = document.querySelector("html");

select.addEventListener("change", () => {
  const choice = select.value;

  switch (choice) {
    case "black":
      update("black", "white");
      break;
    case "white":
      update("white", "black");
      break;
    case "purple":
      update("purple", "white");
      break;
    case "yellow":
      update("yellow", "purple");
      break;
    case "psychedelic":
      update("lime", "purple");
      break;
  }
});

function update(bgColor, textColor) {
  html.style.backgroundColor = bgColor;
  html.style.color = textColor;
}

Resumen

¡Eso es todo lo que realmente necesitas saber por ahora sobre las estructuras condicionales en JavaScript! En el siguiente artículo te daremos algunas pruebas que puedes usar para comprobar qué tan bien entendiste y retuviste esta información.

Véase también

• Operadores de comparación
• Sentencias condicionales en detalle
• Referencia de if...else
• Referencia del operador condicional (ternario)

• Anterior
• Overview: Elementos básicos de JavaScript
• Siguiente