Escreva um JavaScript mais limpo com Operador Optional Chaining [Traduo pt-BR]
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 cdigo parecido com esse:
const street = person && person.address && person.address.street
O cdigo acima acaba no 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 alm 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 cdigo da qual voc precisa acessar as propriedades ou valores que esto aninhados dentro do objeto ou de um array, e que podem ou no ser null/undefined. Vamos olhar a sintaxe bsica do optional chaining para entender exatamente como isso funciona.
const name = person?.name
No cdigo acima temos a varivel person
que pode ou no ser null/undefined. Pelo fato de no sabermos se person
est definida, no podemos acessar diretamente a propriedade name
tendo em vista que se person
for undefined ns teremos o seguinte erro:
Uncaught TypeError: Cannot read property 'name' of undefined
Usando o operador optional chaining (?
), podemos escrever nosso cdigo e acessar diretamente o name
. Se person
for undefined, nosso cdigo vai simplesmente retornar undefined ao invs de um erro. O cdigo acima o mesmo que o cdigo seguinte:
const name = person == null ? undefined : person.name
O operador optional chaining est verificando a varivel person
para garantir que esteja definida antes dde acessar a propriedade name
e se no for definida vai retornar undefined. Como exemplo, se quisermos pegar a rua do endereo, ficaria da seguinte forma:
const street = person?.address?.street
Esse cdigo muito mais fcil de ler do que o cdigo 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 no implementam.
Optional Chaining em Functions
O primeiro grande exemplo de uso adicional do optional chaining nas chamadas de funes. Vamos olhar um cdigo que descreve uma funo de um objeto que pode ou no estar definido.
const windowCount = house.getWindowCount && house.getWindowCount()
Esse cdigo est basicamente verificando a varivel house
para garantir que a propriedade getWindowCount
existe antes de tentar chamar a funo. nesse cdigo desajeitado e difcil de ler, que o optional chaining ir entrar em ao.
const windowCount = house.getWindowCount?.()
Logo de cara pode parecer estranho ter um ponto final (.
) antes o parntesis da funo, mas isso porque o optional chaining um ponto de interrogao seguido por um ponto final, no apenas um ponto de interrogao.
Esse novo cdigo que usa o optional chaining vai agora verificar se existe a funo getWindowCount
definida na varivel house
e, se existir, cham-la. Se a funo no existir na varivel house
ento ir retornar undefined ao invs de chamar a funo.
Essa habilidade do optional chaining nas funes algo que outras linguagens no implementam e realmente til, especialmente em JavaScript, uma vez que functions so 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 no tem certeza se o array est definido, ento voc vai precisar usar um cdigo parecido com esse:
const firstElement = arr && arr[0]
Usando o operador optional chaining esse cdigo 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 cdigo vai funcionar primeiramente verificando se a var arr
est definida e se sim, ir tentar acessar o index especificado. Se a var arr
no estiver definida, ir retornar undefined.
Essa notao de colchetes com optional chaining pode ser usada em objetos tambm.
const name = person?.['name']
Isso realmente til se voc deseja acessar dinamicamente as propriedades de um objeto com base em uma string e no tem certeza se o objeto est definido.
Suporte para navegador
Com todos esses excelentes novos recursos do JavaScript, a maior preocupao 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, porm, voc ainda pode usar esse operador usando ferramentas como o babel para transpilar seu cdigo JavaScript para que navegadores mais antigos possam entend-lo.
Concluso
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 no 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 fcil.
Artigo traduzido e adaptado do original "JavaScript Optional Chaining" por Kyle Cook. Acessar/
Original Link: https://dev.to/dxwebster/escreva-um-javascript-mais-limpo-com-operador-optional-chaining-traducao-pt-br-4gia
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To