Operadores Condicionales en Javascript

Introducción a los Operadores Condicionales

Los operadores condicionales (también llamados sentencias condicionales) en JavaScript son la manera en que un programa toma decisiones. En lugar de ejecutar cada línea de arriba a abajo, permiten que el código elija qué bloque ejecutar según si una condición es true o false.

Este capítulo cubre el conjunto completo de herramientas que usarás cada día:

• las sentencias if, else if y else,
• el operador ternario ? : (y cuándo no anidarlo),
• cómo los valores truthy y falsy afectan las condiciones,
• evaluación de cortocircuito con && y ||,
• el operador de fusión nula ?? para valores predeterminados.

Una condición es cualquier expresión que JavaScript puede evaluar como boolean. Generalmente se construye con operadores de comparación (>, <, ===, …) y se combina con operadores lógicos (&&, ||, !).

La Sentencia if

La sentencia if es el condicional más fundamental; se usa para ejecutar un bloque de código únicamente cuando una condición especificada es verdadera.

Sintaxis

if (condition) {
  // code to execute if condition is true
}

Ejemplo

La Sentencia else

La sentencia else complementa a if y ejecuta su bloque cuando la condición del if es falsa.

Sintaxis

if (condition) {
  // code if condition is true
} else {
  // code if condition is false
}

Ejemplo

La Sentencia else if

else if permite probar varias condiciones en secuencia. JavaScript evalúa cada una de arriba a abajo y ejecuta la primera rama cuya condición sea verdadera; el resto se omite, aunque también pudiera serlo. El orden importa: coloca las condiciones más específicas o de mayor prioridad primero.

Sintaxis

if (condition1) {
  // code if condition1 is true
} else if (condition2) {
  // code if condition2 is true
} else {
  // code if neither condition is true
}

Ejemplo

Cuando se compara un mismo valor contra muchas opciones fijas, una cadena de else if puede volverse repetitiva. La sentencia switch suele ser una opción más limpia en ese caso.

El Operador Condicional (Ternario) ?

El operador ternario (? :) es una forma compacta de abreviar if...else. Es el único operador de JavaScript que acepta tres operandos y, a diferencia de una sentencia, devuelve un valor, lo que lo hace ideal para asignar un resultado en función de una condición.

Sintaxis

let result = condition ? value1 : value2;

Si condition es verdadera, la expresión evalúa a value1; de lo contrario, evalúa a value2.

Ejemplo

Como produce un valor, el operador ternario también resulta práctico directamente dentro de cadenas de plantilla y argumentos de función:

Ternarios Anidados y Encadenados

Un ternario puede a su vez devolver otro ternario, lo que imita una cadena else if:

Esto funciona, pero la legibilidad se deteriora rápidamente. Evita anidar ternarios cuando la lógica no sea trivial: una cadena profunda como a ? b : c ? d : e es difícil de leer y propensa a errores. Prefiere if...else if (o switch) cuando tengas más de una condición, y reserva el ternario para elecciones simples de uno u otro.

Valores Truthy y Falsy

La condición en un if o ternario no tiene que ser un boolean. JavaScript convierte cualquier valor que le pases a true o false. Los valores que se convierten en false se llaman falsy; todo lo demás es truthy.

Hay exactamente ocho valores falsy:

false
0        // and -0
0n       // BigInt zero
""       // empty string
null
undefined
NaN

Todo lo demás — incluidos "0", "false", [] (array vacío) y {} (object vacío) — es truthy.

Por eso una abreviatura común como if (name) { ... } comprueba si name tiene un valor utilizable, en lugar de escribir name === "" o name === undefined.

Evaluación de Cortocircuito

Los operadores lógicos && y || no siempre devuelven un boolean: devuelven uno de sus operandos y dejan de evaluar en cuanto el resultado es conocido. Esto se denomina cortocircuito.

• a && b devuelve a si a es falsy; de lo contrario, devuelve b.
• a || b devuelve a si a es truthy; de lo contrario, devuelve b.

El fallback con || tiene una trampa: trata todos los valores falsy como ausentes. Si 0 o "" es un valor válido, || lo reemplazará incorrectamente. Ese es exactamente el problema que resuelve ??.

Consulta el capítulo dedicado a los operadores lógicos para conocer todas las reglas.

El Operador de Fusión Nula (??)

El operador de fusión nula ?? devuelve su lado derecho solo cuando el lado izquierdo es null o undefined, no para otros valores falsy como 0 o "".

Usa ?? siempre que asignes valores predeterminados a variables que legítimamente podrían ser 0, "" o false. Usa || solo cuando genuinamente quieras que cualquier valor falsy active el fallback.

Conclusión

Los operadores condicionales son la forma en que tu código toma decisiones. Usa if / else if / else para la lógica de ramificación, el ternario ? : para elecciones de valores simples (nunca profundamente anidado) y ?? para asignar valores predeterminados de forma segura. Combínalos con operadores de comparación y operadores lógicos para expresar cualquier condición, y pasa a la sentencia switch cuando necesites comparar un valor contra muchas opciones.

Práctica