This content originally appeared on DEV Community and was authored by Adriana Lima Shikasho
Artigo traduzido e adaptado do original "JavaScript Optional Chaining" por Kyle Cook. Acessar
Se você trabalha com JavaScript há um tempo, você provavelmente já se deparou com um código parecido com esse:
const street = person && person.address && person.address.street
O código acima acaba não sendo a forma mais concisa ou limpa de verificar se um objeto é undefined ou null antes de acessar suas propriedades. Por essse motivo, o JavaScript finalmente nos trouxe o operador optional chaining.
O que é Optional Chaining
Se você tem usado outra linguagem além do JavaScript você provavelmente está familiarizado com o optional chaining pelo fato da maioria das linguagens darem suporte a ele.
Basicamente, a ideia do optional chaining é facilitar a escrita de um código da qual você precisa acessar as propriedades ou valores que estão aninhados dentro do objeto ou de um array, e que podem ou não ser null/undefined. Vamos olhar a sintaxe básica do optional chaining para entender exatamente como isso funciona.
const name = person?.name
No código acima temos a variável person que pode ou não ser null/undefined. Pelo fato de não sabermos se person está definida, não podemos acessar diretamente a propriedade name tendo em vista que se person for undefined nós teremos o seguinte erro:
Uncaught TypeError: Cannot read property 'name' of undefined
Usando o operador optional chaining (?), podemos escrever nosso código e acessar diretamente o name. Se person for undefined, nosso código vai simplesmente retornar undefined ao invés de um erro. O código acima é o mesmo que o código seguinte:
const name = person == null ? undefined : person.name
O operador optional chaining está verificando a variável person para garantir que esteja definida antes dde acessar a propriedade name e se não for definida vai retornar undefined. Como exemplo, se quisermos pegar a rua do endereço, ficaria da seguinte forma:
const street = person?.address?.street
Esse código é muito mais fácil de ler do que o código original e é um dos melhores exemplos de uso do optional chaining. O JavaScript possui diversos usos adicionais para o optional chaining que a maioria das outras linguagens não implementam.
Optional Chaining em Functions
O primeiro grande exemplo de uso adicional do optional chaining é nas chamadas de funções. Vamos olhar um código que descreve uma função de um objeto que pode ou não estar definido.
const windowCount = house.getWindowCount && house.getWindowCount()
Esse código está basicamente verificando a variável house para garantir que a propriedade getWindowCount existe antes de tentar chamar a função. É nesse código desajeitado e difícil de ler, que o optional chaining irá entrar em ação.
const windowCount = house.getWindowCount?.()
Logo de cara pode parecer estranho ter um ponto final (.) antes o parêntesis da função, mas isso é porque o optional chaining é um ponto de interrogação seguido por um ponto final, não apenas um ponto de interrogação.
Esse novo código que usa o optional chaining vai agora verificar se existe a função getWindowCount definida na variável house e, se existir, chamá-la. Se a função não existir na variável house então irá retornar undefined ao invés de chamar a função.
Essa habilidade do optional chaining nas funções é algo que outras linguagens não implementam e é realmente útil, especialmente em JavaScript, uma vez que functions são usadas em todos os lugares.
Optional Chaining em Arrays
O último principal modo que o optional chaining pode ser usado é nos arrays. Se você deseja acessar um elemento no array pelo index, mas não tem certeza se o array está definido, então você vai precisar usar um código parecido com esse:
const firstElement = arr && arr[0]
Usando o operador optional chaining esse código pode ser simplificado para o seguinte:
const firstElement = arr?.[0]
Novamente pode parecer estranho o ponto final antes dos colchetes que acessam o elemento do array, mas faz parte da sintaxe do operador optional chaining. Esse novo código vai funcionar primeiramente verificando se a var arr está definida e se sim, irá tentar acessar o index especificado. Se a var arr não estiver definida, irá retornar undefined.
Essa notação de colchetes com optional chaining pode ser usada em objetos também.
const name = person?.['name']
Isso é realmente útil se você deseja acessar dinamicamente as propriedades de um objeto com base em uma string e não tem certeza se o objeto está definido.
Suporte para navegador
Com todos esses excelentes novos recursos do JavaScript, a maior preocupação é o suporte do navegador. Infelizmente, o optional chaining tem muito pouco suporte fora dos navegadores mais recentes. No momento em que este artigo foi escrito, o optional chaining tinha suporte de apenas 45% em todos os navegadores.
Felizmente, porém, você ainda pode usar esse operador usando ferramentas como o babel para transpilar seu código JavaScript para que navegadores mais antigos possam entendê-lo.
Conclusão
O operador optional chaining é algo que a maioria das outras linguagens tiveram o luxo de usar por anos, mas só agora está sendo introduzido no JavaScript. Isso significa que a maioria dos navegadores ainda não implementaram esse recurso, mas com o poder de ferramentas como o Babel por exemplo, esse recurso pode ser usado hoje em dia, sem a necessidade de se preocupar com o suporte do navegador.
Eu recomendo fortemente o uso deste operador em todos os seus novos projetos que possuem o Babel, pois ele tornará a escrita do JavaScript mais limpa e mais fácil.
Artigo traduzido e adaptado do original "JavaScript Optional Chaining" por Kyle Cook. Acessar/
This content originally appeared on DEV Community and was authored by Adriana Lima Shikasho
Adriana Lima Shikasho | Sciencx (2021-04-23T20:49:26+00:00) Escreva um JavaScript mais limpo com Operador Optional Chaining [Tradução pt-BR]. Retrieved from https://www.scien.cx/2021/04/23/escreva-um-javascript-mais-limpo-com-operador-optional-chaining-traducao-pt-br/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.