Talvez por vezes, como desenvolvedores, tendemos a ter um olhar muito pragmático e deixar de lado a parte conceitual e teórica quando projetamos a abordagem da nossa própria formação. O artigo visa, sem grandes preciosismos, trazer ferramentas nativas do javascript para que você tenha mais vocabulário e possa escrever um código mais legível e eficaz.
Essa será a parte 1 de algumas dicas que previnem erros ou aprimoram o código. Pois bem, podemos começar?
Atribuição via desestruturação (destructuring assignment)
A desestruturação faz parte do léxico de expressões do javascript que permite extrair valores de maneira mais direta, tanto de objetos quanto de arrays. (calma, com os exemplos você entenderá) Dentro dos exemplos mais usuais para os Frontenders, temos a sintaxe de props de componentes funcionais do React:
export default function ExampleComponent({onSubmit}) {
No exemplo acima, que é raramente citado, ao declarar qualquer React component temos dentro dele suas props, que é literalmente um objeto com vários parâmetros, a função *onSubmit * é extraída de dentro desse.
Em exemplos mais elementares de desetruturação,temos extração de vetores, que está mais atrelada a ordem de cada item. Ao contrário, a extração de dentro de objetos é indiferente à ordem. Veja no exemplo:
const names = {a: "joao", b: "alfredo",c: "nicolas",d: "rodrigo"}
const {a, b} = names
console.log(a) //output: "joao"
//a extração de objetos acontece referenciando a chaves (keys)
const numbers = [ 1, 5, 6, 3, 8]
const [ a, z, c] = numbers
console.log(c) //output: 6
//note que aqui o nome atribuido a cada item não interfere na
//extração, apenas segue a mesma ordem.
Os exemplos acima seguem modelos de estrutura de dados mais simplórios.
Desestruturação aninhada (nested destructuring)
Vale frisar que os dados numa rotina normal de desenvolvimento de interfaces são bem mais complexos, na hora de consumir APIs especificam. Então vamos aprofundar? Veja:
const cart = {clientId: "3", total: 345, productsIds: {a: "3", b: "5"}}
const {total, productsIds: {a}} = cart
console.log(a) // ==> "3"
//neste exemplo, o objeto productsIds esta contido pelo objeto cart
//e é diretamente extraido na linha 2, em que é referenciado pela
//chave "a". Portanto, o valor "3" poderia ser invocado pela chave
//"a" em qualquer trecho de código do mesmo escopo
O exemplo acima segue uma estrutura bem usual de dados numa rotina de desenvolvimento, em que existem vários arrays ou objetos aninhados, portanto contidos dentro da estrutura trazida do banco de dados.
Neste caso temos um carrinho com o objeto productsIds aninhado, é possível fazer extração de valores deste. No console log estamos extraindo o valor da key "a" do objeto de productIds.
Dica de ouro: caso o objeto ou array a ser desestruturado for nulo ou undefined ocorre quebra da aplicação, portanto seja cuidadoso. Operadores, como nullish coalescing operator, ou tipagens podem ajudar a prevenir erros.
Outra boa aplicação, junção do primeiro e o terceiro exemplo: suponha que a constante cart seja passada por prop _ para um React component que só irá utilizar o _total _ e _clientId, uma solução de desestruturação inline possível pode ser:
export default function ExampleComponent({cart: {total, clientId}) {
cosole.log(total)// 345
console.log(clientId) // "3"
A desestruturação é parte vital do desenvolvimento com javascript, principalmente no frontend, e é muito frequente até de maneira implícita. Talvez para uma parte 2, seja conveniente trazer operadores que possam te ajudar na parte defensiva, de prevenção de erros, com intuíto de complementar o conteúdo deste artigo. Gostou e gostaria de mais exemplos de desestruturação ou ver uma parte 2? Avalie positivamente o artigo e deixe um comentário.
Você pode me encontrar para dar sugestões e críticas (sempre bem vindos) no meu LinkedIn. Bora conectar?
Top comments (0)