Relacionado con ¿Existe un operador de "unión nula" en JavaScript? - JavaScript ahora tiene un ??
operador que veo que se usa con más frecuencia. Anteriormente, se usaba la mayor parte del código JavaScript ||
.
let userAge = null // These values will be the same. let age1 = userAge || 21 let age2 = userAge ?? 21
en que circunstancias sera ??
y ||
comportarse diferente?
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).
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)