Desestruturação em 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, após a desestruturação essa variável/constante também representará um objeto:

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 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]]; // usamos a desestruturação
    }
  }
}

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