Uma reintrodução à atribuição de desestruturação

Se você escreve JavaScript, provavelmente está familiarizado com o ES2015 e todos os novos padrões de linguagem que foram introduzidos. Um desses padrões que teve uma popularidade incrível é a atribuição desestruturante. A capacidade de “mergulhar” em uma matriz ou objeto e fazer referência a algo dentro dele mais diretamente. Geralmente é algo assim.

 const response = { status: 200, data: {} } // instead of response.data we get... const {data} = response //now data references the data object directly const objectList = [ { key: 'value' }, { key: 'value' }, { key: 'value' } ] // instead of objectList[0], objectList[1], etc we get... const [obj, obj1, obj2] = objectList // now each object can be referenced directly

No entanto, a atribuição de desestruturação é uma sintaxe tão poderosa que muitos desenvolvedores, mesmo aqueles que a usam desde que foi lançada, esquecem algumas das coisas que ela pode fazer. Neste post, veremos cinco exemplos do mundo real para desestruturação de objetos e arrays, às vezes ambos! E só por diversão, vou incluir um exemplo bizarro que encontrei no outro dia.

1. Desestruturação Aninhada

Ser capaz de acessar uma chave de nível superior dentro de um objeto ou o primeiro elemento de uma matriz é poderoso, mas também é um pouco limitador. Ele remove apenas um nível de complexidade e ainda acabamos com uma série de pontos ou referências [0] para acessar o que realmente procuramos.

Como se vê, a desestruturação pode funcionar além do nível superior. E pode haver razões válidas para fazê-lo. Veja este exemplo de uma resposta de objeto de uma solicitação HTTP. Queremos ir além do objeto de dados e acessar apenas o usuário. Desde que saibamos as chaves que estamos procurando, isso não é um problema.

 const response = { status: 200, data: { user: { name: 'Rachel', title: 'Editor in Chief' }, account: {}, company: 'Smashing Magazine' } } const {data: {user}} = response // user is { name: 'Rachel', title: 'Editor in Chief'}

O mesmo pode ser feito com arrays aninhados. Nesse caso, você não precisa saber a chave, pois não há nenhuma. O que você precisa saber é a posição do que você está procurando. Você precisará fornecer uma variável de referência (ou espaço reservado por vírgula) para cada elemento até o que está procurando (falaremos disso mais tarde). A variável pode ter qualquer nome, pois não está tentando corresponder a um valor dentro da matriz.

 const smashingContributors = [['rachel', ['writer', 'editor', 'reader']], ['laurie', ['writer', 'reader']]] const [[rachel, roles]] = smashingContributors // rachel is 'rachel' // roles is [ 'writer', 'editor', 'reader' ]

Tenha em mente que esses recursos devem ser usados ​​criteriosamente, como acontece com qualquer ferramenta. Reconheça seu caso de uso e o público de sua base de código. Considere a legibilidade e a facilidade de mudança no futuro. Por exemplo, se você deseja acessar apenas um subarray, talvez um mapa seja mais adequado.

2. Desestruturação de Objetos e Matrizes

Objetos e arrays são estruturas de dados comuns. Tão comum, aliás, que muitas vezes um aparece dentro do outro. Além da desestruturação aninhada, podemos acessar propriedades aninhadas mesmo que estejam em um tipo de estrutura de dados diferente da externa que estamos acessando.

Veja este exemplo de um array dentro de um objeto.

 const organization = { users: ['rachel', 'laurie', 'eric', 'suzanne'], name: 'Smashing Magazine', site: 'https://www.smashingmagazine.com/' } const {users:[rachel]} = organization // rachel is 'rachel'

O caso de uso oposto também é válido. Uma matriz de objetos.

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name}] = users // name is 'rachel'

Como se vê, temos um pequeno problema neste exemplo. Só podemos acessar o nome do primeiro usuário; caso contrário, tentaremos usar 'name' para referenciar duas strings diferentes, o que é inválido. Nosso próximo cenário de desestruturação deve resolver isso.

3. Pseudônimos

Como vimos no exemplo acima (quando temos chaves repetidas dentro de diferentes objetos que queremos extrair), não podemos fazê-lo da maneira “típica”. Nomes de variáveis ​​não podem se repetir dentro do mesmo escopo (essa é a maneira mais simples de explicar, obviamente é mais complicado do que isso).

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name: rachel}, {name: laurie}] = users // rachel is 'rachel' and laurie is 'laurie'

O alias só é aplicável a objetos. Isso porque os arrays podem usar qualquer nome de variável que o desenvolvedor escolher, em vez de ter que corresponder a uma chave de objeto existente.

4. Valores padrão

A desestruturação geralmente assume que o valor que está referenciando está lá, mas e se não estiver? Nunca é agradável desordenar código com valores indefinidos. É aí que os valores padrão são úteis.

Vamos ver como eles funcionam para objetos.

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name='Brian', role='publisher'} = user // name is Luke // role is publisher

Se a chave referenciada já tiver um valor, o padrão será ignorado. Se a chave não existir no objeto, o padrão será usado.

Podemos fazer algo semelhante para arrays.

 const roleCounts = [2] const [editors = 1, contributors = 100] = roleCounts // editors is 2 // contributors is 100

Assim como no exemplo de objetos, se o valor existir, o padrão será ignorado. Observando o exemplo acima, você pode notar que estamos desestruturando mais elementos do que existem no array. Que tal desestruturar menos elementos?

5. Ignorando Valores

Uma das melhores partes da desestruturação é que ela permite acessar valores que fazem parte de uma estrutura de dados maior. Isso inclui isolar esses valores e ignorar o restante do conteúdo, se assim desejar.

Na verdade, vimos um exemplo disso anteriormente, mas vamos isolar o conceito sobre o qual estamos falando.

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name} = user // name is Luke

Neste exemplo, nunca desestruturamos a organization e isso é perfeitamente aceitável. Ele ainda está disponível para referência dentro do objeto de user , assim.

 user.organization

Para arrays, na verdade existem duas maneiras de “ignorar” elementos. No exemplo de objetos, estamos referenciando especificamente valores internos usando o nome da chave associada. Quando os arrays são desestruturados, o nome da variável é atribuído por posição. Vamos começar ignorando os elementos no final do array.

 const roleCounts = [2, 100, 100000] const [editors, contributors] = roleCounts // editors is 2 // contributors is 100

Desestruturamos o primeiro e o segundo elementos do array e o resto é irrelevante. Mas e os elementos posteriores? Se for baseado em posição, não temos que desestruturar cada elemento até atingir o que queremos?

Como se vê, nós não. Em vez disso, usamos vírgulas para indicar a existência desses elementos, mas sem variáveis ​​de referência eles são ignorados.

 const roleCounts = [2, 100, 100000] const [, contributors, readers] = roleCounts // contributors is 100 // readers is 100000

E podemos fazer as duas coisas ao mesmo tempo. Ignorando elementos onde quisermos usando o espaço reservado para vírgula. E novamente, como no exemplo do objeto, os elementos “ignorados” ainda estão disponíveis para referência no array roleCounts .

Exemplo Wonky

O poder e a versatilidade da desestruturação também significam que você pode fazer coisas realmente bizarras. Se eles serão úteis ou não, é difícil dizer, mas vale a pena saber que é uma opção!

Um exemplo é que você pode usar a desestruturação para fazer cópias superficiais.

 const obj = {key: 'value', arr: [1,2,3,4]} const {arr, arr: copy} = obj // arr and copy are both [1,2,3,4]

Outra coisa para a qual a desestruturação pode ser usada é a desreferenciação.

 const obj = {node: {example: 'thing'}} const {node, node: {example}} = obj // node is { example: 'thing' } // example is 'thing'

Como sempre, a legibilidade é da maior importância e todos esses exemplos devem ser usados ​​judicialmente. Mas conhecer todas as suas opções ajuda você a escolher a melhor.

Conclusão

JavaScript está cheio de objetos e arrays complexos. Seja a resposta de uma solicitação HTTP ou conjuntos de dados estáticos, é importante poder acessar o conteúdo incorporado com eficiência. Usar a atribuição de desestruturação é uma ótima maneira de fazer isso. Ele não apenas lida com vários níveis de aninhamento, mas permite acesso focado e fornece padrões no caso de referências indefinidas.

Mesmo que você use a desestruturação por anos, há muitos detalhes ocultos nas especificações. Espero que este artigo tenha agido como um lembrete das ferramentas que a linguagem oferece a você. Da próxima vez que você estiver escrevendo código, talvez um deles seja útil!