3 exemplos práticos de uso de desestruturação em JavaScript

Escrevendo um limpador de código usando padrões de reestruturação

Você provavelmente já está familiarizado com a reestruturação em JavaScript. Chegou a nós em 2015 na especificação ES6 , mas se você precisar atualizar seu conhecimento, no site da Mozilla, poderá ler um grande artigo detalhado sobre como tudo funciona .

Mas saber como funciona não é o mesmo que saber usá-lo. Aqui estão três padrões para ajudar você a tornar seu código mais limpo, mais confiável e mais fácil de ler!

1. Argumentos de Função Nomeada

Argumentos nomeados são uma maneira alternativa de manipular parâmetros de função para argumentos posicionais. Em vez de especificar argumentos em uma ordem bem definida, apenas forneça seu nome. Em Python, por exemplo, fica assim:

def sum(a=1,b=2,c=3): return a+b+c sum(b=5,a=10) 

Está vendo? A ordem não é importante se você especificou explicitamente o nome do parâmetro. As vantagens sobre argumentos posicionais são que:

1. Você pode omitir um ou mais parâmetros ao chamar uma função
2. A ordem em passar os argumentos agora não é importante
3. O código tornou-se mais legível

Embora argumentos nomeados de forma nativa não sejam suportados em JavaScript, podemos usar o padrão de desestruturação para obter todas as três vantagens acima. Este será o último exemplo já em JavaScript:

 function sum({a = 1, b = 2, c = 3}) { return a + b + c } sum({b: 10, a: 5}) // 5 + 10 + 3 = 18 

Todos os objetivos foram alcançados: você pode omitir c , a ordem agora não é importante e os argumentos são seguidos por seus próprios nomes. Tudo isso é possível precisamente devido à desestruturação.

2. Análise mais limpa da resposta do servidor

Frequentemente, na resposta do servidor, estamos interessados ​​apenas em um bloco de dados ou mesmo em apenas um valor específico desse bloco. Se esse for o seu caso, use a desestruturação para ignorar tudo o mais que o servidor normalmente envia. Um exemplo:

 function mockServerCall () { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ 'status': 200, 'content-type': 'application/json', 'data' : { dataOfInterest: 42 } }) }, 250) }) } mockServerCall() .then(({data: { dataOfInterest = 100 }}) => { console.log(dataOfInterest) // 42 (    100) }) 

Esse padrão permite que você extraia os dados de interesse para nós à medida que os argumentos são analisados. E você tem a oportunidade de ajustar os valores padrão como um bônus. O que nos leva suavemente ao próximo padrão ...

Definindo valores padrão durante a atribuição

Se uma variável não existir no espaço para nome, geralmente precisamos configurá-la para seu valor padrão.

Antes da destruição, você poderia fazer algo assim:

 //      var nightMode = userSettings.nightMode || false 

Mas essa abordagem exigirá uma linha de código para cada atribuição. A reestruturação permitirá que você faça tudo de uma só vez:

 const userSettings = {nightMode: true, fontSize: 'large'} const { nightMode = false, language = 'en', fontSize = 'normal' } = userSettings console.log(nightMode) // true console.log(language) // 'en' console.log(fontSize) // 'large' 

Esse padrão pode ser usado para definir o estado dos componentes do React!

Espero que esses padrões sejam úteis! Para ler mais sobre a desestruturação, siga os links abaixo (informações em inglês - aprox. Transl.) :

ES6 Em Profundidade: Reestruturação

Aprenda o básico sobre adereços de desestruturação no React