Desestruturação do JavaScript

Sintaxe de atribuição de desestruturação

A sintaxe de atribuição de desestruturação desempacota propriedades de objeto para variáveis:

let {firstName, lastName} = pessoa;

Também pode desempacotar arrays e qualquer outro objeto iterável:

let [firstName, lastName] = pessoa;

Desestruturação de objeto

Exemplo

// Criar um objeto
const pessoa = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Desestruturação
let {firstName, lastName} = pessoa;

Experimente Você Mesmo

A ordem das propriedades não importa:

Exemplo

// Criar um objeto
const pessoa = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Desestruturação
let {lastName, firstName} = pessoa;

Experimente Você Mesmo

Valores padrão de objeto

Para propriedades possíveismente ausentes, podemos definir valores padrão:

Exemplo

// Criar um objeto
const pessoa = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Desestruturação
let {firstName, lastName, country = "US"} = pessoa;

Experimente Você Mesmo

Nome de propriedade de objeto

Exemplo

// Criar um objeto
const pessoa = {
  firstName: "Bill",
  lastName: "Gates",
  age: 50
};
// Desestruturação
let {lastName: nome} = pessoa;

Experimente Você Mesmo

Desestruturação de string

Um dos usos da desestruturação é desempacotar caracteres de string.

Exemplo

// Criar uma string
let nome = "W3Schools";
// Desestruturação
let [a1, a2, a3, a4, a5] = nome;

Experimente Você Mesmo

Desestruturação de array

Podemos extrair variáveis de array para suas próprias variáveis:

Exemplo

// Criar um array
const frutas = ["Bananas", "Oranges", "Apples", "Mangos"];
// Desestruturação
let [fruta1, fruta2] = frutas;

Experimente Você Mesmo

Pular valores de array

Podemos usar dois ou mais vírgulas para pular valores de array:

Exemplo

// Criar um array
const frutas = ["Bananas", "Oranges", "Apples", "Mangos"];
// Desestruturação
let [fruta1,,,fruta2] = frutas;

Experimente Você Mesmo

Posições de array

Podemos extrair valores de posições específicas de um array:

Exemplo

// Criar um array
const frutas = ["Bananas", "Oranges", "Apples", "Mangos"];
// Desestruturação
let {[0]: fruta1, [1]: fruta2} = frutas;

Experimente Você Mesmo

Atributos restantes

Pode-se usar atributos restantes no final da sintaxe de desestruturação.

Esta sintaxe armazenará todos os valores restantes em um novo array:

Exemplo

// Criar um array
const numbers = [10, 20, 30, 40, 50, 60, 70];
// Desestruturação
const [a, b, ...rest] = numbers;

Experimente Você Mesmo

Desestruturar Map

Exemplo

// Criar um Map
const fruits = new Map([
  [" maçãs", 500],
  ["bananas", 300],
  
]
// Desestruturação
let text = "";
for (const [key, value] of fruits) {
  text += key + " é " + value;
}

Experimente Você Mesmo

Trocar Variáveis JavaScript

Você pode usar a atribuição de desestruturação para trocar os valores de duas variáveis:

Exemplo

let firstName = "Bill";
let lastName = "Gates";
// Desestruturação
[firstName, lastName] = [lastName, firstName];

Experimente Você Mesmo