Desestruturação - JavaScript

A desestruturação permite extrair valores individuais de um objeto para variáveis ou constantes:

const user = {
    name: "Tom",
    age: 24,
    phone: "+367438787",
    email: "tom@gmail.com"
};
const {name, email} = user;
console.log(name);      // Tom
console.log(email);     // tom@gmail.com

Durante a desestruturação de um objeto, as variáveis são colocadas entre chaves e é atribuído um objeto a elas. A correspondência entre as propriedades do objeto e as variáveis/constantes ocorre pelo nome.

É possível atribuir a variáveis/constantes nomes diferentes dos nomes das propriedades do objeto:

const user = {
    name: "Tom",
    age: 24,
    phone: "+367438787",
    email: "tom@gmail.com"
};
const {name: userName, email: mailAddress} = user;
console.log(userName);      // Tom
console.log(mailAddress);   // tom@gmail.com

Nesse caso, a propriedade name é mapeada para a variável userName, e o campo email para mailAddress.

Também podemos definir valores padrão para variáveis/constantes, para o caso de algumas propriedades não estarem presentes no objeto:

const user = {
    name: "Tom",
    age: 24,
};
const {name  = "Sam", email: mailAddress = "sam@gmail.com"} = user;
console.log(name);              // Tom
console.log(mailAddress);       // sam@gmail.com

Se uma variável/constante na desestruturação corresponder a uma propriedade que é um objeto complexo, após a desestruturação essa variável/constante também representará um objeto complexo:

const user = {
  name: "Tom",
  age: 24,
  account: {
      login: "tom555",
      password: "qwerty"
  }
};

const {account} = user;
console.log(account.login);         // tom555
console.log(account.password);      // qwerty

Mas se quisermos obter valores individuais de um objeto complexo aninhado, como no exemplo acima com o objeto account dentro de user, não precisamos obter todo esse objeto - também podemos fornecer variáveis/constantes separadas para suas propriedades:

const user = {
  name: "Tom",
  age: 24,
  account: {
      login: "tom555",
      password: "qwerty"
  }
};
const {name, account: {login}} =  user;
console.log(name);      // Tom
console.log(login);     // tom555

Obtenção de Propriedades Restantes com o Operador rest

O operador rest ou operador ... permite obter as propriedades restantes de um objeto, que não foram mapeadas para variáveis/constantes, em uma variável/constante separada:

const tom = {
  name: "Tom",
  age: 24,
  phone: "+367438787",
  email: "tom@gmail.com"
};
const {name, age, ...contacts} = tom;
console.log(name);      // Tom
console.log(age);       // 24
console.log(contacts);  // {phone: "+367438787", email: "tom@gmail.com"}

Neste caso, o objeto tom é dividido em três constantes: name, age e contacts. As constantes name e age são mapeadas para as propriedades do objeto tom pelo nome. A constante contacts recebe todas as demais propriedades não mapeadas do objeto. No entanto, para obtê-las, o operador ... é usado antes do nome da constante, ou seja, ...contacts. Assim, a constante contacts representará um objeto que conterá as propriedades email e phone do objeto tom.

É importante notar que a variável/constante que recebe todas as propriedades restantes de um objeto sempre representará um objeto, mesmo se ela receber apenas uma propriedade desse objeto.

Desestruturação de Arrays

Também é possível desestruturar arrays:

const users = ["Tom", "Sam", "Bob"];
const [a, b, c] = users;

console.log(a);     // Tom
console.log(b);     // Sam
console.log(c);     // Bob

Na desestruturação de um array, as variáveis são colocadas em colchetes e sequencialmente recebem os valores dos elementos do array.

Se houver menos variáveis/constantes do que elementos no array, os elementos restantes do array são simplesmente ignorados:

const users = ["Tom", "Sam", "Bob"];
const [a, b] = users;

console.log(a);     // Tom
console.log(b);     // Sam

Se houver mais variáveis/constantes do que elementos no array, as variáveis/constantes não mapeadas recebem o valor undefined:

const users = ["Tom", "Sam", "Bob"];
const [a, b, c, d] = users;

console.log(a);     // Tom
console.log(b);     // Sam
console.log(c);     // Bob
console.log(d);     // undefined

Obtenção de Elementos Restantes em Outro Array

Usando o operador ..., também é possível obter todos os elementos restantes de um array em forma de outro array:

const users = ["Tom", "Sam", "Bob", "Mike"];
const [tom, ...others] = users;

console.log(tom);       // Tom
console.log(others);    // ["Sam", "Bob", "Mike"]

Aqui, o array others conterá os três últimos elementos do array.

Pulando Elementos

Também podemos pular uma série de elementos do array, deixando espaços em vez dos nomes das variáveis:

const users = ["Tom", "Sam", "Bob", "Ann", "Alice", "Kate"];
const [first,,,,fifth] = users;

console.log(first);     // Tom
console.log(fifth);     // Alice

A expressão first,,,,fifth indica que queremos obter o primeiro elemento do array na variável first, em seguida, pular três elementos e obter o quinto elemento na variável fifth.

Da mesma forma, podemos obter, por exemplo, o segundo e o quarto elementos:

const users = ["Tom", "Sam", "Bob", "Ann", "Alice", "Kate"];
const [,second,,forth] = users;

console.log(second);        // Sam
console.log(forth);         // Ann

Desestruturação de Arrays Multidimensionais

const coordinates = [[1,2,3], [4,5,6], [7,8,9]];

const [
    [x1,y1,z1],
    [x2,y2,z2],
    [x3,y3,z3]
] = coordinates;

console.log(x1, y1, z1);    // 1 2 3

Desestruturação de Objetos de Arrays

Podemos combinar a obtenção de dados de um array e um objeto:

const people = [
  {name: "Tom", age: 34},
  {name: "Bob", age: 23},
  {name: "Sam", age: 32}
];
const [,{name}] = people;

console.log(name);      // Bob

Neste caso, obtemos o valor da propriedade name do segundo objeto no array.

Outro exemplo - desestruturação de objetos durante a iteração de um array de objetos:

const people = [
  {name: "Tom", age: 34},
  {name: "Bob", age: 23},
  {name: "Sam", age: 32}
];
for(let {name: username, age: userage} of people){
  console.log(`Name: ${username}  Age: ${userage}`);
}
// Saída no console
// Name: Tom  Age: 34
// Name: Bob  Age: 23
// Name: Sam  Age: 32

Desestruturação de Parâmetros

Se um array ou objeto é passado como parâmetro para uma função, ele também pode ser desestruturado em valores individuais dessa forma:

function display({name:userName, age:userAge}) {
  console.log(userName, userAge);
}

function sum([a, b, c]) {
  const result = a + b + c;
  console.log(result);
}

const user = {name:"Alice", age:33, email: "alice@gmail.com"};
const numbers = [3, 5, 7, 8];

display(user);  // Alice 33
sum(numbers);   // 15

Troca de Valores

Graças à desestruturação, tornou-se muito fácil trocar valores entre duas variáveis:

let first = "Tom";
let second = "Bob";
[first, second] = [second, first];

console.log(first);     // Bob
console.log(second);    // Tom

Isso facilita a resolução de várias tarefas. Por exemplo, usamos a desestruturação para uma simples ordenação de array:

let nums = [9, 3, 5, 2, 1, 4, 8, 6];
for(let i = 0; i < nums.length; i++)
    for(let j = 0; j < nums.length; j++)
        if (nums[i] < nums[j]) [nums[j], nums[i]] = [nums[i], nums[j]];

console.log(nums);  // [1, 2, 3, 4, 5, 6, 8, 9]