6

Em minhas pesquisas acabei me deparando com o conceito destructuring, qual a função desse conceito dentro das novas feature do ES06.

No exemplo abaixo mostra no código JS essa expressão:

const pessoa = {
  nome: "Ana",
  idade: 5,
  endereco: {
    logradouro: "Rua ABC",
    numero: 1000,
  },
};

const { nome, idade } = pessoa;
console.log(nome, idade);

Pelo conceito não seria desmembrar o código em varias partes?

1

1 Resposta 1

5

Primeiro vou dizer que este é um conceito mais amplo até que da computação, mas vamos ficar na nossa área. Não é algo específico de JavaScript.

A vida toda você sempre fez structuring, só não usou o termo, até porque ele é feito de forma mais ou menos manual na maior parte das vezes, então ele nem seria tão bem aplicado. Estruturar algo é formar o objeto que deseja com as várias partes dele, preencher o(s) membro(s). Geralmente fazemos a estruturação do objeto na sua construção que é um misto de alocação de memória e inicialização das partes do objeto.

Destructuring também costuma ser feito em seus códigos de forma mais manual e específica, justamente por isso o termo não se aplica bem. Vamos onde o termo começa ficar mais interessante.

Se estruturamos com a construção e a destruição é a eliminação do objeto, a desestruturação é decompor o objeto, aproveitar as partes dele, como sempre fizemos, mas agora com um mecanismo automático, portanto ele é só uma syntax sugar da linguagem.

Basicamente é como se ele escrevesse um código para você (nas boas implementações, não sei bem se é o caso das implementações típicas de JS, mas deve ser) para acessar os diversos campos de um objeto e usar em outros locais, provavelmente através de variáveis individuais (mas pode ser de uso direto em algum lugar, se bem que de alguma forma acabarão sendo aproveitas como variáveis).

Então o que ele faz é justamente desmembrar (ótimo termo já que existem membros ali dentro) o objeto em várias partes. Cada campo pode virar uma variável individual sem você fazer a atribuição de um por um no código.

Podemos dizer que o código acima na linha mais importante para o assunto seria traduzido para:

const nome = pessoa.nome;
const idade = pessoa.idade;

Coloquei no GitHub para referência futura.

Obviamente que os demais campos seriam ignorados.

Só tomar cuidado para não fazer a operação quando não tem necessidade. Programador JS virou especialista em fazer isto e deixar de usar o que é opcional, mas não deveria.

Então ele é só uma forma de facilitar a escrita do código, deixar mais expressivo e curto, quem sabe até evitando algum erro, ele existe para diminuir o boiler plate, mas não muda nada se não tivesse na linguagem, passamos décadas sem isso.

Pode ver mais em O que são nomes computados (desestruturação "dinâmica") em JavaScript?.

Você deve fazer log-in para responder a esta pergunta.