Diferencia entre || y ?? en JavaScript: ¿Cuándo usar cada uno?

En JavaScript, existen varias formas de asignar un valor por defecto cuando una variable es “falsy” o no tiene un valor definido. Dos de las formas más comunes son los operadores || (OR lógico) y ?? (fusión nula o nullish coalescing). Aunque pueden parecer similares, existen importantes diferencias entre ellos que pueden afectar el comportamiento de tu código.

Si no comprendes bien las diferencias entre ambos operadores, podrías introducir errores sutiles en el código, especialmente cuando trabajas con valores como 0, false o ''. Errores que habitualmente no suelen ser fáciles de identificar. En esta entrada, explicaremos en detalle cómo funciona cada operador, cuándo deberías usar cada uno y en qué situaciones pueden resultar problemáticos.

El operador || (OR lógico)

El operador OR lógico (||) evalúa la primera expresión y, si esta es falsy, devuelve la segunda expresión. En JavaScript, los valores que se consideran falsy son:

• false
• 0
• '' (cadena vacía)
• null
• undefined
• NaN

Esto significa que cualquier valor en esta lista será tratado como “vacío” y reemplazado por el valor a la derecha del operador cuando se use ||.

Ejemplo de uso del operador ||

Un ejemplo básico del uso del operador || es cuando la variable tiene un valor de 0.

let valor = 0;
let resultado = valor || 10;
console.log(resultado); // 10 (porque 0 es falsy)

En este caso, como valor es 0, el operador || lo considera un valor “falso” y devuelve 10 en su lugar. Esto puede ser problemático si 0 es un valor válido para la variable en el programa. Ahora se puede ver como funciona el operador con una cadena vacía.

En Analytics Lane

Nuevo test de normalidad interactivo en el laboratorio de Analytics Lane

let nombre = '';
let usuario = nombre || 'Desconocido';
console.log(usuario); // 'Desconocido'

Aquí, la cadena vacía '' también se considera falsy, por lo que el operador || la reemplaza con 'Desconocido'.

El operador ?? (Fusión nula)

El operador de fusión nula (?? o nullish coalescing) devuelve la primera expresión siempre que el valor a la izquierda no sea null ni undefined. A diferencia de ||, este operador no considera falsy los valores como 0, false o ''.

Ejemplo de uso del operador ??

Ahora se puede comparar como operaria el operador ?? cuando el valor de la variable es 0.

let valor = 0;
let resultado = valor ?? 10;
console.log(resultado); // 0 (porque 0 no es null ni undefined)

Aquí, valor es 0, pero como 0 no es null ni undefined, el operador ?? lo conserva en lugar de asignar 10. Al igual que en el caso anterior, se puede ver como funciona con una cadena de texto vacía.

let nombre = '';
let usuario = nombre ?? 'Desconocido';
console.log(usuario); // '' (se mantiene la cadena vacía)

A diferencia de ||, el operador ?? tampoco reemplaza la cadena vacía porque no es null ni undefined.

Comparación entre || y ??

Las principales diferencias entre los operadores || y ?? en JavaScript se puede ver en los siguientes ejemplos.

Diferencia con 0

let descuento = 0;
console.log(descuento || 10); // 10
console.log(descuento ?? 10); // 0

• || devuelve 10 porque 0 es falsy.
• ?? devuelve 0 porque 0 no es null ni undefined.

Diferencia con cadena vacía ('')

let nombre = '';
console.log(nombre || 'Anónimo'); // 'Anónimo'
console.log(nombre ?? 'Anónimo'); // ''

• || reemplaza la cadena vacía por 'Anónimo'.
• ?? conserva la cadena vacía, ya que no es null ni undefined.

Diferencia con null

let usuario = null;
console.log(usuario || 'Invitado'); // 'Invitado'
console.log(usuario ?? 'Invitado'); // 'Invitado'

En este caso, ambos operadores devuelven 'Invitado', ya que null es tratado igual por || y ??.

Diferencia con valores booleanos

let activo = false;
console.log(activo || true); // true
console.log(activo ?? true); // false

• || devuelve true porque false es falsy.
• ?? conserva false porque false no es null ni undefined.

Precaución al combinar ?? con && o ||

En JavaScript, ?? tiene menor precedencia que && y ||, lo que puede causar comportamientos inesperados si no usas paréntesis. Por ejemplo:

let resultado = null || false ?? 'Por defecto';
console.log(resultado); // Error de sintaxis

Este código produce un error porque la combinación de || y ?? sin paréntesis no está permitida. Para evitar esto, usa paréntesis:

let resultado = (null || false) ?? 'Por defecto';
console.log(resultado); // 'Por defecto'

¿Cuándo usar || y cuándo usar ???

La elección entre || y ?? depende del contexto:

• Usa || cuando quieras proporcionar un valor por defecto en caso de que una variable sea falsy. Es útil cuando valores como 0, false o '' también deben ser tratados como “vacíos”.
• Usa ?? cuando solo quieras proporcionar un valor por defecto si la variable es null o undefined, permitiendo valores como 0, false o ''.

Regla general: Si quieres evitar que 0, false o '' se sustituyan involuntariamente, usa ?? en lugar de ||.

Conclusiones

El operador || y el operador ?? pueden parecer similares, pero tienen un comportamiento distinto cuando se trata de valores falsy. Mientras que || trata 0, false y '' como valores “vacíos”, ?? solo reemplaza null y undefined, conservando otros valores falsy.

Comprender la diferencia entre ambos operadores es crucial para escribir código más preciso y evitar errores sutiles. La elección entre || y ?? dependerá de si deseas tratar todos los valores falsy como “ausentes” o solo null y undefined.

Nota: La imagen de este artículo fue generada utilizando un modelo de inteligencia artificial.