Encadeamento opcional, união com nulo e como eles mudam nossa abordagem para escrever código

Foto de Miguel Á. Padriñán .

Bom dia amigos

Apresento a você a tradução do artigo de Sam Sedighian “Encadeamento opcional, coalescência nula e como eles mudarão a maneira como você escreve código” .

Encadeamento opcional, união com nulo e como eles alteram a abordagem para escrever código

Uma maneira mais segura e ergonômica de acessar o objeto.

Se você seguir as versões do TypeScript, saberá que o Encadeamento opcional e a coalescência nula foram introduzidos no TypeScript 3.7. Além disso, esses recursos são incluídos por padrão no Babel 7.8.0. Este é um dos principais candidatos à função dos recursos JavaScript. Atualmente, eles estão nos estágios 4 e 3, respectivamente (em 23 de janeiro, foi adotado o padrão ECMAScript 2020 , onde há uma cadeia opcional, integração com nulo e algumas coisas interessantes; sei que um artigo apareceu recentemente em Habré uma tradução sobre os recursos introduzidos no JS ES2020, no entanto, acho que alguns exemplos extras não serão prejudiciais - aprox.

Encadeamento opcional

Muitas vezes, temos que acessar a propriedade profundamente incorporada de um objeto. Se você escreveu 100 linhas de código não de alta qualidade, isso pode causar o TypeError não detectado.

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

Para mais exemplos, usaremos este pseudocódigo (resposta falsa do 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', }] } 

Tentando evitar o TypeError não capturado e obter o valor do ID, temos que "dançar um pouco". A abordagem que usamos anteriormente foi verificar a verdade do objeto em cada nível de aninhamento. Esse modelo é mais como uma declaração condicional que retorna um valor booleano do que uma maneira de acessar uma propriedade, mas esta é a maneira mais limpa e segura que localizamos até agora:

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

Ou, se você preferir desestruturar:

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

Uma maneira mais ergonômica é usar o Lodash ou o Ember:

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

Como fazemos o mesmo com a cadeia opcional?

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

Combinando com nulo (coalescência nula)

Quando o valor da propriedade do objeto que estamos acessando é nulo ou indefinido, usamos o valor padrão. Anteriormente, o operador || (lógico ou).

Se queremos escrever sedighian no valor da propriedade de login por padrão, fazemos o seguinte:

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

O segundo e terceiro exemplos são semelhantes. Qual é a vantagem de combinar com null? A combinação com nulo é avaliada para a direita apenas se o lado esquerdo estiver indefinido ou nulo. Isso nos dá alguma proteção contra resultados aleatórios quando trabalhamos com valores reais (válidos), mas falsos.

Suponha que desejemos retornar '' (string vazia), false ou 0. Com o operador || Isso não vai funcionar, porque ele retornará ao lado direito. Nesse caso, combinar com null é útil para nós:

 //  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, você pode usar bibliotecas de terceiros e, no caso do Ember, um utilitário interno:

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

Lembre-se de que combinar com nulo é mais que o valor padrão de uma variável. Esta é uma maneira alternativa de executar um bloco de código se não houver valores correspondentes:

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

O que deve ser lembrado?

Lembre-se da ordem dos caracteres na sequência opcional (primeiro um ponto de interrogação e depois um ponto final):

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

A cadeia opcional não protege contra a chamada de uma função inexistente:

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

A combinação com nulo não é idêntica a lodash.get ou EmberObject.getWithDefault. A principal diferença é como a combinação de c null lida com o 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 

Obrigado pela atenção. Tudo de bom.