El operador de coalescencia nula (??) es un operador lógico que permite proporcionar un valor por defecto cuando una expresión es null o undefined.
Este operador, introducido en ECMAScript 2020 (ES11), proporciona una forma más precisa y clara de tratar valores nulos y no definidos (en comparación con otros enfoques tradicionales como usar ||).
El operador coalescencia nula es muy útil para simplificar y mejorar la legibilidad del código cuando trabajamos con valores que contienen null o undefined.
Coalescencia es un término que se refiere al proceso de unión o fusión de dos o más elementos en uno solo
Sintaxis del operador coalescencia nula
La sintaxis del operador de coalescencia nula es simple:
let resultado = valor1 ?? valor2;En este caso,
- Si
valor1no esnulloundefined,resultadotomará el valor devalor1. - Si
valor1esnulloundefined,resultadotomará el valor devalor2.
Por ejemplo, en este caso
let nombreUsuario = usuario.nombre ?? 'Ni idea, oiga';
console.log(nombreUsuario); // 'Ni idea, oiga'Aquí,
- Si nombre de usuario fuera
Pedro,nombreUsuariosería `Pedro. - Por lo que
nombreUsuariotoma el valor ‘Ni idea, oiga’.
Combinación con otros operadores
El operador ?? encaja maravillosamente bien (❤️) con otros operadores como el operador de encadenamiento opcional ?..
let nombreUsuario = usuario?.nombre ?? 'Desconocido';
console.log(nombreUsuario); // 'Desconocido'En este caso se nombreUsuario será ‘Ni idea, oiga’ tanto si,
usuarioesnullusuariono esnull, pero si esnullsu propiedadnombre
En el ejemplo anterior, sin ?., si usuario hubiera sido null os habría tirado una excepcion
Comparativa con otros métodos
Condicionales tradicionales
En versiones anteriores de JavaScript, el manejo de valores nulos y no definidos se hacía utilizando condicionales (||).
let nombre = valor || 'Usuario';Esto es bastante peor, ya que || considera cualquier valor falsy (como 0, false, '', etc) como una razón para usar el valor por defecto.
Por lo cuál, realmente no responde a undefined o null, ¡si no a un montón de cosas!
Evitad usar ||. Es mucho más moderno y “más mejor” usar ??, que para eso está 😉
Operador Ternario
El operador ternario es otra alternativa para manejar valores nulos. Aunque es menos elegante y puede resultar en código más difícil de leer:
let nombre = (valor !== null && valor !== undefined) ? valor : 'Usuario';El operador ?? proporciona una forma más concisa y clara de manejar valores nulos y no definidos.
Que no hagáis eso, y usad ?? ¡recoñe! 😉