HOWTO · JavaScript

Especificar varias condiciones dentro de la declaración if en JavaScript

Este artículo explica cómo usar varias condiciones en una instrucción `if` de JavaScript.

En esta página

En JavaScript, coloca cada condición entre los paréntesis de una instrucción if. Une las condiciones con && cuando todas deban ser verdaderas, o con || cuando baste con que una lo sea. Usa paréntesis para que las combinaciones de operadores queden claras, y una cadena if...else if cuando distintas coincidencias requieran acciones diferentes.

Combinar condiciones con && y || en una instrucción if de JavaScript

En una condición if, && requiere que ambos operandos sean verdaderos según las reglas de truthiness de JavaScript, mientras que || requiere que al menos uno lo sea. Los operadores lógicos de JavaScript devuelven uno de los valores de sus operandos, que no necesariamente es un booleano; después, la instrucción if evalúa ese resultado según su truthiness. Por ejemplo, age >= 18 && hasTicket permite realizar una acción solo si la persona es mayor de edad y tiene entrada. Si cualquiera de las condiciones es falsa según esas reglas, la condición combinada también lo será.

Por ejemplo, isAdmin || isOwner permite realizar una acción cuando el usuario es administrador o propietario del elemento. Elige el operador según la regla que necesites: «todas estas condiciones» requiere &&; «cualquiera de estas condiciones» requiere ||.

En este ejemplo, la primera comprobación solo acepta a una persona mayor de edad que tenga entrada. La segunda acepta a un usuario que sea administrador o propietario del elemento.

Ejecuta este ejemplo:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

const visitors = [
  { name: "Ava", age: 20, hasTicket: true, isAdmin: false, isOwner: false },
  { name: "Ben", age: 16, hasTicket: true, isAdmin: false, isOwner: true },
  { name: "Cy", age: 30, hasTicket: false, isAdmin: true, isOwner: false }
];

for (const visitor of visitors) {
  if (visitor.age >= 18 && visitor.hasTicket) {
    console.log(`${visitor.name}: entry allowed`);
  }

  if (visitor.isAdmin || visitor.isOwner) {
    console.log(`${visitor.name}: can manage the item`);
  }
}
Ava: entry allowed
Ben: can manage the item
Cy: can manage the item

Las condiciones usan propiedades booleanas y una comparación numérica, por lo que puedes leer cada parte por separado antes de que el operador combine los resultados. En un programa real, sustituye los valores de ejemplo por los de tu aplicación.

Combinar && y || de forma segura con agrupación y precedencia

Puedes combinar ambos operadores en una condición. JavaScript evalúa && antes que ||, así que isMember || hasCoupon && cartTotal >= 50 equivale a isMember || (hasCoupon && cartTotal >= 50). La condición permite el acceso a todos los miembros o a quienes no son miembros, pero tienen un cupón y un total de compra de al menos 50.

Añade paréntesis cuando quieras agrupar la regla de otra manera o facilitar su lectura. Por ejemplo, (isMember || hasCoupon) && cartTotal >= 50 exige el total mínimo tanto a los miembros como a quienes tienen un cupón. Las dos expresiones no son equivalentes. Consulta la referencia de precedencia de operadores de MDN para conocer la precedencia de los operadores de JavaScript.

Usa igualdad estricta, como en status === "ready", al comparar un valor con un número o una cadena concretos. Así evitas la conversión de tipos que realiza la igualdad no estricta (==). Los operadores lógicos también aplican evaluación de cortocircuito: && no evalúa su operando derecho cuando el izquierdo es falso, y || omite el operando derecho cuando el izquierdo es verdadero. Esto resulta útil para comprobaciones protegidas, como user !== null && user !== undefined && user.active.

Usar if…else if cuando las condiciones requieren acciones diferentes

Una sola condición if combina comprobaciones para una acción. Cuando un valor debe determinar cuál de varias acciones distintas ejecutar, escribe una cadena if...else if...else. JavaScript comprueba las ramas en orden, ejecuta la primera cuya condición sea verdadera y omite las demás de esa cadena. El else final es opcional y gestiona los valores que no coincidieron con ninguna condición anterior.

Por ejemplo, puedes clasificar una puntuación en categorías con condiciones como score >= 90, score >= 70 y score >= 50. Comprueba primero la categoría más alta: una puntuación de 95 cumple las tres comparaciones, pero la cadena solo ejecuta la primera rama que coincide. El siguiente ejemplo asigna una etiqueta de acción distinta a cada categoría:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

const score = 95;
let action;

if (score >= 90) {
  action = "excellent";
} else if (score >= 70) {
  action = "pass";
} else if (score >= 50) {
  action = "review";
} else {
  action = "retry";
}

Con score en 95, action pasa a ser "excellent". Aunque la puntuación también cumple los umbrales inferiores, JavaScript omite las ramas restantes después de encontrar la primera coincidencia. Si usaras instrucciones if separadas, podrían ejecutarse varias acciones para la misma puntuación.

Asegúrate de que la condición y la acción de cada rama correspondan. Por ejemplo, la rama score >= 70 abarca puntuaciones desde 70 hasta menos de 90 porque la categoría superior se comprueba primero. Para valores exactos, usa ===; para comprobar directamente un intervalo, combina comparaciones con &&, como en score >= 70 && score < 90.