Como usar Destructuring do Javascript

Introdução

O destructuring do Javascript é utilizado para extrair valores de arrays e objetos para variáveis.

Este operador pode parecer um pouco complexo de primeiro momento, mas ele é simples de usar e muito útil.

Desestruturação de objeto

Normalmente um objeto tem diversas propriedades com valores.

É comum ter que pegar somente uma das propriedades para realizar alguma operação.

Veja um objeto de exemplo:

const usuario = { 
  nome: 'Jose', 
  idade: 30 
};

Antes, para acessar cada propriedade, era feito dessa forma:

let nome = usuario.nome;
let idade = usuario.idade;
console.log(nome); // Jose
console.log(idade); // 30

Porém, utilizando a desestruturação é possível obter cada valor separadamente e já atribuir a uma nova variável:

let { nome, idade } = usuario;
console.log(nome); // Jose
console.log(idade); // 30

Neste caso, quis pegar os dois valores, nome e idade, porém é possível obter só o nome ou só a idade.

Clonar um objeto com desestructuring e spread

Outra ação comum, é clonar um objeto com Javascript, não é preciso copiar item por item manualmente.

A desestruturação em conjunto com o operador spread, consegue realizar esse clone.

O operador spread é utilizado para obter os valores de um iterável (array ou objeto) e propagar esses valores em uma outra variável, sua sintaxe são os 3 pontos (…).

Utilizando o mesmo objeto de usuário acima, para clonar o objeto o código ficaria dessa forma:

const cloneUsuario = { ... usuario };
console.log(cloneUsuario); // {nome: 'Jose', idade: 30}

Desestruturação de array

Da mesma forma que com objetos, é possível obter os valores de um array e separar em variáveis.

Veja um array com os seguintes valores:

const valores = [ 10, 20, 30 ];

Em vez de acessar posição a posição do array, da para separar diretamente em variáveis, como no objeto:

const [ valor1, valor2, valor3 ] = valores;

console.log(valor1); // 10
console.log(valor2); // 20
console.log(valor3); // 30

Desestruturação de valor vazio

Vamos voltar no exemplo do usuário, e vamos supor que o parâmetro idade não esteja definido no objeto.

Nesse caso, utilizar a desestruturação, irá tentar obter um valor que não existe.

Como resultado disso, a variável irá conter undefined. Veja:

const usuario = { 
  nome: 'Jose',
};
let { idade } = usuario;

console.log(idade); // undefined

Com isso, dependendo da lógica que for utilizar, é bom verificar se a variável recebeu o valor esperado ou se está vazia.

Caso queira, também é possível definir um valor padrão para o desestructuring:

const usuario = { 
  nome: 'Jose',
};
let { idade = 18 } = usuario;

console.log(idade); // 18

Neste caso talvez não caiba tanto o valor padrão, mas dependendo da sua lógica pode ser essencial para o código não quebrar.

Desestruturação em estrutura de repetição

Outra ação possível, é dentro de um loop for ... of, já extrair os valores do objeto para realizar alguma ação.

No objeto de usuário, teremos agora um array de usuários:

const usuarios = [
  {
    nome: 'Jose',
    idade: 30,
  },
  {
    nome: 'Maria',
    idade: 25,
  },
];

Agora é possível fazer o desestructuring para obter o nome e idade de cada usuário diretamente no loop:

for (let { nome, idade } of usuarios) {
  console.log(`Nome: ${nome}, Idade: ${idade}`);
}

// Nome: Jose, Idade: 30
// Nome: Maria, Idade: 25

Desestruturação em retorno de função

Quando uma função retorna um objeto, também é possível usar o destructuring para obter os dados retornados separadamente.

Veja uma função que retorna um objeto com os dados do usuário:

const obterUsuario = () => {
  return {
    nome: 'Jose',
    idade: 30,
  };
};

Se pegar o retorno completo da função, o resultado será esse:

const usuario = obterUsuario();

console.log(usuario); // { nome: Jose, idade: 30 };

Porém se quiser utilizar somente o nome:

const { nome } = obterUsuario();

console.log(nome); // Jose

Conclusão

A sintaxe de desestruturação ajuda bastante no dia a dia.

Com ela é possível separar dados de objetos, criar clones, obter valores padrão, seja em objetos ou arrays.

E tudo isso torna essa sintaxe muito útil, recomendo estudar mais e tentar aplicar cada vez mais o destructuring.

Para ver outros canais onde o posto conteúdo sobre Javascript veja os Links do Programando Soluções.

Desenvolvimento Web com HTML, CSS e JavaScript

Aprenda a testar Aplicações Javascript

Referências

https://daily-dev-tips.com/posts/javascript-object-destructuring-tips/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

https://www.devmedia.com.br/javascript-destructuring-assignment/41201

https://javascript.info/destructuring-assignment

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax