Destructuring em Java Script

O destructuring (ou desestruturação) em JavaScript é um recurso poderoso que permite extrair valores de arrays e objetos e atribuí-los a variáveis de maneira muito mais concisa e legível. Introduzido no ES6 (ECMAScript 2015), ele facilita a manipulação de dados complexos e torna o código mais claro e eficiente. Neste post, veja destructuring em Java Script.

Destructuring de arrays

Com o destructuring, você pode extrair valores de arrays diretamente em variáveis. Veja um exemplo básico:

const numeros = [1, 2, 3];

const [a, b, c] = numeros;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Aqui, os valores do array numeros são desestruturados e atribuídos às variáveis a, b e c em uma única linha.

Ignorando elementos

Se você quiser ignorar certos elementos ao desestruturar, basta pular a posição correspondente:

const numeros = [1, 2, 3, 4];

const [primeiro, , terceiro] = numeros;

console.log(primeiro); // 1
console.log(terceiro); // 3

Nesse caso, ignoramos o segundo elemento do array e capturamos apenas o primeiro e o terceiro.

Valores padrão

Você também pode definir valores padrão para as variáveis, caso o array não tenha elementos suficientes:

const numeros = [1];

const [a, b = 2] = numeros;

console.log(a); // 1
console.log(b); // 2

Se b não receber um valor do array, será atribuído o valor padrão 2.

Destructuring de objetos

Destructuring também funciona muito bem com objetos, permitindo extrair propriedades e atribuí-las a variáveis correspondentes com base no nome da chave.

const pessoa = {
  nome: "João",
  idade: 25
};

const { nome, idade } = pessoa;

console.log(nome); // João
console.log(idade); // 25

Aqui, as variáveis nome e idade recebem os valores correspondentes do objeto pessoa.

Alterando nomes de variáveis

Se você quiser atribuir a propriedade a uma variável com um nome diferente, é possível fazer isso facilmente:

const pessoa = {
  nome: "João",
  idade: 25
};

const { nome: primeiroNome, idade: anos } = pessoa;

console.log(primeiroNome); // João
console.log(anos); // 25

Agora, primeiroNome e anos são as variáveis que armazenam os valores de nome e idade.

Valores padrão em objetos

Assim como nos arrays, você pode definir valores padrão ao desestruturar objetos:

const pessoa = {
  nome: "Maria"
};

const { nome, idade = 30 } = pessoa;

console.log(nome); // Maria
console.log(idade); // 30

Aqui, a propriedade idade recebe o valor padrão 30, pois não existe no objeto pessoa.

Destructuring em funções

O destructuring também pode ser utilizado para extrair parâmetros de arrays ou objetos diretamente em funções:

Arrays em funções

function soma([a, b]) {
  return a + b;
}

console.log(soma([2, 3])); // 5

Objetos em funções

function saudar({ nome, idade }) {
  console.log(`Olá, ${nome}. Você tem ${idade} anos.`);
}

const pessoa = {
  nome: "Ana",
  idade: 28
};

saudar(pessoa); // Olá, Ana. Você tem 28 anos.

Nesse exemplo, a função saudar recebe um objeto e desestrutura diretamente as propriedades nome e idade.

Aninhamento de destructuring

Quando você trabalha com dados mais complexos, como objetos aninhados ou arrays dentro de objetos, o destructuring também pode ser aplicado de forma aninhada:

const usuario = {
  nome: "Carlos",
  endereco: {
    cidade: "São Paulo",
    pais: "Brasil"
  }
};

const { nome, endereco: { cidade, pais } } = usuario;

console.log(nome); // Carlos
console.log(cidade); // São Paulo
console.log(pais); // Brasil

Aqui, endereco é desestruturado diretamente para extrair cidade e pais.

Outro exemplo prático

 const pessoas = {
   nome: 'José',
   idade: 26,
   endereco: {
      logradouro: 'Rua da Sorte',
      numero: 215
 }    
 
 /* Utilizando o operador destructuring é possível retirar atributos de dentro de uma estrutura, 
 neste caso de um objeto: */
 
 const {nome, idade} = pessoa //"Tire" do objeto pessoa o nome e a idade
 console.log(nome, idade)  
 
 //Para extrair o endereço da outra estrutura:
 const { endereco: { logradouro, numero } } = pessoa

O código acima cria uma estrutura onde são armazenadas nome, idade e endereço de pessoas, e é feito uma desestruturação para retirar informações dos atributos da estrutura criada.

Também é possível criar variáveis para armazenar as informações extraidas da estrutura:

 ...
 const {nome: n, idade: i} = pessoa
 console.log(n, i)  

No exemplo abaixo foi desestruturado um array o qual foi preenchido com os valores 2, 4 e 10 e mostrado logo a seguir:

 const[n1, n2, n3] = [ 2, 4, 10]
 console.log(n1, n2, n3)

Também é possível utilizar o destructuring no âmbito das funções:

 //São passados valores padrão
 function rand({ min = 0, max = 800 }) {
   const val = Math.random() * (max - min) + min
   return Math.floor(valor)
 }

//Aqui criamos um objeto e definimos os valores para os parâmetros do mesmo
 const obj = { max: 70, min: 30 }
 console.log(rand(obj)) //Definimos o objeto como parâmetro para a função
 console.log(rand({ min: 100 } )) 

O destructuring é uma ferramenta incrível que permite manipular arrays e objetos de maneira mais simples e intuitiva.

Ele melhora a legibilidade do código, reduz a quantidade de código repetitivo e torna a manipulação de dados complexos muito mais direta. Ao compreender e usar essa técnica, você pode tornar seu código JavaScript mais eficiente e fácil de manter.

Dúvidas ou sugestões sobre destructuring em Java Script? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: destructuring