Veja nesse artigo
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