Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 23, 2021 08:49 pm GMT

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

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To