Un tutorial de fusión nula (en JS) para personas normales

¡Hola! ¿Alguna vez se sintió frustrado al tratar de manejar valores nulos o indefinidos en su código JavaScript? La fusión nula es una nueva característica que ayuda a que sea mucho más fácil. En esta publicación, explicaremos la fusión nula.

Eso significa términos simples, ejemplos divertidos y sin jerga complicada. Al final, estará escribiendo código JS limpio y conciso en muy poco tiempo.

Entonces, ¿qué es exactamente la fusión nula? Básicamente, es una forma breve y sencilla de proporcionar un valor predeterminado cuando algo es nulo o indefinido. En lugar de tener ternarios anidados desordenados o declaraciones OR lógicas, puede usar el operador de doble signo de interrogación (??) para fusionarse a un valor predeterminado.

¿Suena confuso? No se preocupe, le mostraremos cómo funciona con algunos ejemplos fáciles de seguir. Abróchate el cinturón, ¡este va a ser un viaje divertido!

¿Qué es exactamente el operador coalescente nulo?

¿Alguna vez te has quedado atascado tratando con valores nulos en JavaScript? yo se que tengo Bueno, amigo, déjame presentarte el operador coalescente nulo (??). Este pequeño va a hacer tu vida mucho más fácil.

Entonces, ¿qué es exactamente el operador coalescente nulo? Básicamente, es un atajo para proporcionar un valor predeterminado cuando algo podría ser nulo o indefinido. En lugar de escribir:

 let name = obj.name || 'default name';

Ahora puede simplemente escribir:

 let name = obj.name ?? 'default name';

El ?? El operador devolverá el lado izquierdo si no es nulo (es decir, nulo o indefinido), de lo contrario, devolverá el lado derecho. Entonces, en el ejemplo anterior, si obj.name no es nulo o indefinido, el nombre se establecerá en obj.name . Pero si obj.name es nulo o indefinido, el nombre será 'nombre predeterminado'.

Bastante útil, ¿verdad? Algunos otros ejemplos:

 let age = ageInput ?? 25; // Sets age to ageInput if not nullish, otherwise 25 let email = user.email ?? 'no email provided'; let hobbies = obj.hobbies ?? []; // Sets hobbies to obj.hobbies if not nullish, otherwise an empty array

Espero que esto ayude a simplificar algo de su lógica condicional en JavaScript.

Un ejemplo del mundo real con el que todos podemos relacionarnos

¿Alguna vez has ido a pagar algo y te has dado cuenta de que te faltan unos cuantos dólares? Todos hemos estado allí. La fusión nula es como encontrar algunos dólares extra en su bolsillo para que realmente pueda pagar lo que quiere comprar.

Digamos que te diriges a tu cafetería favorita para tomar tu café matutino habitual. Te acercas al mostrador con $3 en la mano, listo para ordenar. Pero cuando el barista te dice tu total, sale a $3.50 después de impuestos.

La fusión nula es como recordar de repente que tiene otro dólar en el bolsillo, por lo que aún puede obtener su café. ¡Uf!

En JavaScript, la fusión nula es una forma de proporcionar un valor predeterminado en caso de que algo se resuelva como nulo o indefinido. Por ejemplo, supongamos que tiene una función que puede o no devolver un valor:

 function getCoffeePrice() { // Returns $3.50 or undefined } let price = getCoffeePrice() ?? '$3.50';

Aquí, si getCoffeePrice() devuelve undefined, price será '$3.50' por defecto gracias al ?? operador coalescente nulo. Así que tiene la garantía de tener un precio por su café de cualquier manera.

La fusión nula permite que su código sea más resistente al proporcionar valores predeterminados alternativos cuando las variables son nulas o indefinidas. Al igual que encontrar ese dólar extra en su bolsillo en la cafetería, le asegura que tiene lo que necesita para completar la transacción. Bastante útil, ¿verdad?

Ahora puede estar tranquilo sabiendo que comprende la fusión nula como un profesional. ¡Feliz codificación y disfrute de su café!

Usando Nullish Coalescing en JavaScript

El operador coalescente nulo (??) devuelve su operando izquierdo si no es nulo; de lo contrario, devuelve su operando derecho.

¿Confundido? Analicemos eso. Un valor "nulo" es nulo o indefinido. Entonces el ?? El operador verifica si el valor de la izquierda es nulo y, de ser así, devuelve el valor de la derecha.

Por ejemplo:

 const name = bob ?? 'anonymous';

Esto asignará el valor de nombre a 'bob' si se define bob. Si bob no está definido o es nulo, asignará la cadena 'anónimo' en su lugar.

¿Por qué es útil?

Sin el ?? operador, tendrías que hacer esto:

 const name = bob !== null && bob !== undefined ? bob : 'anonymous';

El ?? operator nos da una sintaxis más corta y limpia para hacer esencialmente lo mismo.

Se puede usar en cualquier lugar de JavaScript: en variables , argumentos de funciones , propiedades de objetos, etc. En cualquier lugar donde normalmente usaría || (o) operador para valores predeterminados, ahora puede usar ?? para un valor predeterminado "nulo".

Algunos ejemplos:

 const foo = null ?? 'default string'; // foo is 'default string' const bar = 0 ?? 42; // bar is 0 const qux = 0 || 42; // qux is 42 - || returns first truthy value function doSomething(x = 0) { x = x ?? 10; // If x is nullish, set default of 10 console.log(x); } doSomething(null); // Prints 10 doSomething(5); // Prints 5

¡Espero que esto ayude a explicar el operador coalescente nulo!

Por qué la fusión nula es mejor que OR (||)

El operador OR (||) devolverá el primer valor verdadero.

El operador OR (||) funciona devolviendo el primer valor verdadero que encuentra. Si ambos valores son falsos, devolverá el último valor. Por ejemplo:

 let name = null; let user = name || 'John'; // user is 'John'

Aquí, name es nulo (falso), por lo que user obtiene el segundo valor, 'John'.

El operador coalescente nulo (??) es más inteligente.

El operador coalescente nulo (??) se introdujo en ES2020 y es un poco más inteligente que OR (||). Devolverá el primer valor definido (no nulo/indefinido). Entonces, si el primer valor es una cadena vacía, 0 o falso, devolverá ese valor. Por ejemplo:

 let name = ''; let user = name ?? 'John'; // user is ''

Aquí, name es una cadena vacía, por lo que user obtiene name (el primer valor definido).

El operador coalescente nulo nos permite proporcionar valores predeterminados de una manera más limpia. Podemos establecer valores predeterminados para valores nulos/indefinidos sin preocuparnos por valores falsos como 0, cadenas vacías, falso, etc.

Por ejemplo, digamos que tenemos una función que devuelve la edad de un usuario, pero a veces la edad es nula:

 function getAge() { return age; // could be null } let userAge = getAge() || 30; // Uses OR, not ideal

Aquí, si age es 0, '' o falsa, userAge sería incorrectamente 30.

El uso del operador coalescente nulo soluciona esto:

 let userAge = getAge() ?? 30; // Uses ??

Ahora, userAge solo tendrá 30 años si age es nula o indefinida. Se utilizará cualquier otro valor falso como 0.

Entonces, en resumen, use el operador coalescente nulo (??) en lugar de OR (||) cuando desee proporcionar un valor predeterminado para nulo/indefinido, pero no para valores falsos como 0, cadenas vacías o falso.

¡Su código será más limpio y menos propenso a errores!

Preguntas frecuentes sobre la fusión nula

Así que ha oído hablar de este nuevo y elegante operador Nullish Coalescing (??) en JavaScript y tiene algunas preguntas. No te preocupes, ¡te tengo cubierto!

¿Con qué tipos de datos funciona la fusión nula?

• La fusión nula funciona con cualquier tipo de datos en JavaScript, incluidos:
• Números: 0 ?? 1 // Devuelve 1
• Cuerdas: '' ?? 'Hola' // Devuelve 'Hola'
• Booleanos: falso ?? verdadero // Devuelve verdadero
• Objetos: {} ?? {nombre: 'Juan'} // Devuelve {nombre: 'Juan'}
• Matrices: [] ?? [1, 2, 3] // Devuelve [1, 2, 3]
• ¡Y más!

¿Cuál es la diferencia entre || (O y ?? (Coalescencia nula) ¿Operadores?

el || El operador (OR) devolverá el operando derecho si el operando izquierdo es falso (falso, 0, cadena vacía, nulo, indefinido, NaN).

El ?? (Nullish Coalescing) solo devolverá el operando derecho si el operando izquierdo es nulo o indefinido.

Entonces, ¿la diferencia clave es que? considera 0 y cadenas vacías como valores válidos, mientras que || no es.

¿Cuándo debo usar? Terminado ||?

¿Usar ?? cuando desee proporcionar un valor predeterminado para nulo o indefinido, pero considere 0 y cadenas vacías como valores válidos.

Uso || cuando desee proporcionar una alternativa para cualquier valor "falso".

¡Espero que esto ayude a aclarar algunas de esas preguntas candentes que tenía sobre el operador Nullish Coalescing! Avíseme si tiene alguna otra pregunta.

Conclusión

Ahora ya sabe todo sobre la fusión nula y cómo funciona en JavaScript. Bastante simple, ¿verdad? Este pequeño operador puede ahorrarle tiempo y hacer que su código sea más limpio al proporcionar valores predeterminados de manera concisa.

¡Así que siga adelante y fusione valores anulados al contenido de su corazón! Está en camino de dominar las características modernas de JavaScript.

¡Feliz codificación!