El operador OR || usa el valor de la derecha si la izquierda es falsa , mientras que el operador coalescente nulo ?? usa el valor de la derecha si la izquierda es null o undefined .

Estos operadores se utilizan a menudo para proporcionar un valor predeterminado si falta el primero.

Pero el operador OR || puede ser problemático si su valor izquierdo puede contener "" o 0 o false (porque estos son valores falsos ) :

 console.log(12 || "not found") // 12 console.log(0 || "not found") // "not found" console.log("jane" || "not found") // "jane" console.log("" || "not found") // "not found" console.log(true || "not found") // true console.log(false || "not found") // "not found" console.log(undefined || "not found") // "not found" console.log(null || "not found") // "not found"

En muchos casos, es posible que solo desee el valor correcto si la izquierda es null o undefined . Eso es lo que el operador coalescente nulo ?? es para:

 console.log(12 ?? "not found") // 12 console.log(0 ?? "not found") // 0 console.log("jane" ?? "not found") // "jane" console.log("" ?? "not found") // "" console.log(true ?? "not found") // true console.log(false ?? "not found") // false console.log(undefined ?? "not found") // "not found" console.log(null ?? "not found") // "not found"

mientras que el ?? operador no está disponible en las versiones LTS actuales de Node (v10 y v12), puede usarlo con algunas versiones de TypeScript o Node:

El ?? El operador se agregó a TypeScript 3.7 en noviembre de 2019.

Y más recientemente, el ?? El operador se incluyó en ES2020 , que es compatible con Node 14 (lanzado en abril de 2020).

Cuando el operador coalescente nulo ?? es compatible, normalmente lo uso en lugar del operador OR || (a menos que haya una buena razón para no hacerlo).

En breve:

El operador coalescente nulo distingue entre valores nulos ( null , undefined ) y falsos pero definidos ( false , 0 , '' etc.). Consulte el siguiente gráfico para obtener más información.

para || (O lógico) los valores nulos y falsos son los mismos.

 let x, y x = 0 y = x || 'default' // y = 'default' y = x ?? 'default' // y = 0

Como se vio arriba, la diferencia entre los operadores ?? y || es que uno está buscando valores nulos y otro está buscando valores falsos . Sin embargo, hay muchos casos en los que se comportan de la misma manera. Esto se debe a que en JavaScript todos los valores nulos también son falsos (pero no todos los valores falsos son nulos ).

Creé un gráfico simple para ilustrar la relación de valores nulos y falsos en JavaScript:

Usando lo que aprendimos anteriormente, podemos crear algunos ejemplos para diferentes comportamientos:

 let y y = false || 'default' // y = 'default' y = false ?? 'default' // y = false y = 0n || 'default' // y = 'default' y = 0n ?? 'default' // y = 0n y = NaN || 'default' // y = 'default' y = NaN ?? 'default' // y = NaN y = '' || 'default' // y = 'default' y = '' ?? 'default' // y = ''

Dado que el nuevo operador coalescente nulo puede diferenciar entre ningún valor y un valor falso, puede ser beneficioso si, por ejemplo, necesita verificar si no hay una cadena o una cadena vacía. En general, es probable que desee utilizar ?? en lugar de || la mayor parte del tiempo

Por último y también menos importante, aquí están las dos instancias en las que se comportan de la misma manera:

 let y y = null || 'default' // y = 'default' y = null ?? 'default' // y = 'default' y = undefined || 'default' // y = 'default' y = undefined ?? 'default' // y = 'default'

Como regla muy breve, podría verlo de la manera opuesta:

• || (o) returns the first "truthy" value (o el último valor si no existe ningún valor de "veracidad")
• ?? (fusión nula) returns the first "defined" value (o el último valor si no existe ningún valor "definido")

Ejemplo

 x = false || true; // --> true (the first 'truthy' value - parameter 2) x = false ?? true; // --> false (the first 'defined' value - parameter 1)