Artigos JavaScript JavaScript: Destructuring assignment

É uma expressão que permite extrair dados de um Array ou Object em variáveis distintas.

Guia do artigo:

Visão geral

Este recurso permite extrair de um Array ou Object valores e transformar em uma variável ou constante, no exemplo abaixo utilizamos o destructuring para converter objetos de um Array em uma constante:

const getVencedoresTorneio = () => [
    { id: 1, nome: 'Tiago' },
    { id: 2, nome: 'Pedro' },
    { id: 3, nome: 'Maria' }
  ]
  
  const notifica = (...nomes) => console.log(
    `vencedores do torneio:\n%s`,
    nomes.map((v, k) => `${++k}º lugar - $`).join('\n')
  )
  
  const [ usuarioA, usuarioB ] = getVencedoresTorneio()
  
  notifica(usuarioA.nome, usuarioB.nome)
  // vencedores do torneio:
  // 1º lugar - Tiago
  // 2º lugar - Pedro

Sintaxe

const [ itemA, itemB ] = [ valorA, valorB ]
  const ({ itemA itemB } = { itemA: 1, itemB: 2 })

Na prática

Exemplo 1

É comum a necessidade de recuperar um item armazenado em um Array e atribuí-lo a uma variável. Nestes casos podemos fazer como no exemplo abaixo: 

const totais = [ 10, 20, 30 ]
  
  const [ valorA, valorB, valorC ] = totais
  
  console.log(valorA) // 10
  console.log(valorB) // 20
  console.log(valorC) // 30

Exemplo 2

É possível extrair items de um Array e armazenar o resto:

const [ valorA, valorB, ..valorC ] = [ 10, 20, 30, 40, 50, 60 ]
  
  console.log(valorA) // 10
  console.log(valorB) // 20
  console.log(valorC) // [ 30, 40, 50, 60 ]

Exemplo 3

Podemos pré-definir valores quando não exista determinado elemento em um Array, para que quando seja feita a extração deste resultado para uma variável ele receba um valor padrão:

const [ itemA = 5, itemB = 10 ] = [ 20 ]
  
  console.log(itemA) // 20
  console.log(itemB) // 10

Exemplo 4

Podemos extrair valores de objetos literais utilizando o nome de suas propriedades, como no exemplo abaixo:

const usuario = { nome: 'Pedro', idade: 18 }
  
  const { nome, idade } = usuario
  
  console.log(nome) // Pedro
  console.log(idade) // 18

5. Valores pré-determinados em objetos

Podemos também utilizar os valores pré definidos em objetos assim como é feito nos Arrays:

const usuario = { idade: 18, temFilhos: true }
  
  const { nome = 'Jonas', idade, temFilhos } = usuario
  
  console.log(nome) // Jonas
  console.log(idade) // 18
  console.log(temFilhos) // true

6. Extraindo valores de objetos

Podemos capturar os resultados que não tenham sido extraídos como variáveis:

const usuario = { nome: 'Pedro', idade: 18, temFilhos: true }
  
  const { nome, ...outrosDados } = usuario
  
  console.log(nome) // Pedro
  console.log(outrosDados) // { idade: 18, temFilhos: true }

Perceba que ao colocar reticências precedendo a variável outrosDados todos os valores existentes no objeto, exceto o nome, que havia sido extraído, foram adicionados a ela como um novo objeto.

Compatibilidade

Engine Versão Minima
Node.JS ( V8) 6.4.0
Safari ( WebKit) 11.1
Chrome ( V8) 68
Microsoft Edge ( ChakraCore) 17
Firefox ( Gecko) 61

Nota: O Opera utiliza atualmente grande parte do código do Chrome como base para o seu próprio desenvolvimento e por isso ele não é mencionado nesta listagem.

Confira também

Evolução do JavaScript

Evolução do JavaScript

Vídeo
Apresentando o Node.js

Apresentando o Node.js

Vídeo
Introdução ao JavaScript

Introdução ao JavaScript

Curso