Encadenamiento opcional, unión con nulo y cómo cambian nuestro enfoque para escribir código

Foto de Miguel Á. Padriñán

Buen dia amigos!

Le presento la traducción del artículo de Sam Sedighian "Encadenamiento opcional, fusión nula y cómo cambiarán la forma de escribir el código" .

Encadenamiento opcional, unión con nulo y cómo cambian el enfoque para escribir código

Una forma más segura y ergonómica de acceder al objeto.

Si sigue las versiones de TypeScript, sabrá que el Encadenamiento opcional y la fusión nula se introdujeron en TypeScript 3.7. Además, estas características se incluyen por defecto en Babel 7.8.0. Este es uno de los principales contendientes para el papel de las funciones de JavaScript. Actualmente, se encuentran en las etapas 4 y 3, respectivamente (el 23 de enero, se adoptó el estándar ECMAScript 2020 , donde hay una cadena opcional, integración con nulo y un par de cosas interesantes; Soy consciente de que recientemente apareció un artículo sobre Habré una traducción sobre las características introducidas en el JS ES2020, sin embargo, creo que un par de ejemplos adicionales no afectarán, aprox.

Encadenamiento opcional

Muy a menudo, tenemos que acceder a la propiedad profundamente incrustada de un objeto. Si escribiste 100 líneas de código de muy baja calidad, esto podría provocar un Error de tipo no capturado.

const data = {} data.user.id // Uncaught TypeError: Cannot read property 'id' of undefined //           -   

Para más ejemplos, utilizaremos este pseudocódigo (respuesta falsa del servidor):

 { 'url': 'https://api.github.com/repos/sedighian/Hello-World/pulls/12', 'number': 12, 'state': 'open', 'title': 'Amazing new feature', 'user': { 'login': 'sedighian', 'id': 123234 }, 'labels': [{ 'id': 208045946, 'name': 'bug', }] } 

Tratando de evitar UnError TypeError y obtener el valor de identificación, tenemos que "bailar un poco". El enfoque que usamos antes era verificar la verdad del objeto en cada nivel de anidación. Esta plantilla es más como una declaración condicional que devuelve un valor booleano que una forma de acceder a una propiedad, pero esta es la forma más limpia y segura que hemos localizado hasta ahora:

 const userId = data && data.user && data.user.id //     const label = data && data.labels && data.labels[0] const someFuncRes = navigator && navigator.serviceWorker && window.serviceWorker() 

O, si prefiere la desestructuración:

 const { user: { id } = {} } = data || {} //        const { user } = data || {} const { id } = user || {} 

Una forma más ergonómica es usar Lodash o Ember:

 // lodash import _ from 'lodash' _.get(data, 'user.id') // ember import { get } from '@ember/object' get(data, 'user.id') 

¿Cómo hacemos lo mismo con la cadena opcional?

 const userId = data?.user?.id //     const label = data?.labels?.[0] const someFuncRes = someFunc?.() 

Combinación con nulo (fusión nula)

Cuando el valor de la propiedad del objeto al que estamos accediendo es nulo o indefinido, usamos el valor predeterminado. Anteriormente, el operador || (lógico o).

Si queremos escribir sedighian en el valor de la propiedad de inicio de sesión de forma predeterminada, hacemos lo siguiente:

 //      data && data.user && data.user.login || 'sedighian' //     data?.user?.login || 'sedighian' //        null data?.user?.login ?? 'sedighian' 

El segundo y tercer ejemplos son similares. ¿Cuál es la ventaja de combinar con nulo? La combinación con nulo se evalúa a la derecha solo si el lado izquierdo es indefinido o nulo. Esto nos brinda cierta protección contra resultados aleatorios cuando trabajamos con valores reales (válidos), pero falsos.

Supongamos que queremos devolver '' (cadena vacía), falso o 0. Con el operador || Esto no funcionará, porque regresará al lado derecho. En este caso, combinar con nulo es útil para nosotros:

 //  data.user.alias   ,     data?.user?.alias ?? 'code ninja' // '' data?.user?.alias || 'code ninja' // code ninja //  data.user.volumePreference = 0 data?.user?.volumePreference ?? 7 // 0 data?.user?.volumePreference || 7 // 7 //  data.user.likesCats = false data?.user?.likesCats ?? true // false data?.user?.likesCats || true // true 

Como alternativa, puede utilizar bibliotecas de terceros y, en el caso de Ember, una utilidad incorporada:

 // lodash import _ from 'lodash' _.get(data, 'user.likesCats', true) // ember import { getWithDefault } from '@ember/object' getWithDefault(data, 'user.likesCats', true) 

Recuerde que combinar con nulo es más que el valor predeterminado de una variable. Esta es una forma alternativa de ejecutar un bloque de código si no hay valores correspondientes:

 const temp = { celsius: 0 } temp?.fahrenheit ?? setFahrenheit(temp) 

¿Qué se debe recordar?

Recuerde el orden de los caracteres en la cadena opcional (primero un signo de interrogación, luego un punto):

 data.?user // Uncaught SyntaxError: Unexpected token '?' data?.user // ok 

La cadena opcional no protege contra la llamada a una función inexistente:

 data?.user() // Ungaught TypeError: user is not a function 

La combinación con nulo no es idéntica a lodash.get o EmberObject.getWithDefault. La principal diferencia es cómo combinar c null maneja el valor "null":

 const data = { user: { interests: null } } // lodash import _ from 'lodash' _.get(data, 'user.interests', 'knitting') // null // ember import { get } from '@ember/object' getWithDefault(data, 'user.interests', 'knitting') // null //   null data?.user?.interests ?? 'knitting' // knitting 

Gracias por su atencion Todo lo mejor