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
Sintaxe
Na pr�tica
Compatibilidade

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

V�deo

Apresentando o Node.js