Destructuring em JavaScript

Trata-se de uma sintaxe que permite “desembrulhar” valores de um objeto ou um array antes de atribuí-los à variáveis.

O exemplo a seguir “desembrulha” os valores de um array em duas variáveis.

> const [ peso, idade ] = [ 70, 36 ];
> console.log(peso)
70
> console.log(idade)
36

Outro exemplo usando arrays.

> const [ peso, idade, ...resto ] = [ 70, 36, 170, 1984 ]
> console.log(peso)
70
> console.log(idade)
36
> console.log(resto)
[ 170, 1984 ]

Também é possível “desembrulhar” propriedades de objetos.

> const { peso, idade } = { peso: 70, idade: 36 }
> console.log(peso)
70
> console.log(idade)
36

Mais um exemplo usando objetos.

> const { peso, idade, ...resto } = { "peso": 70, "idade": 36, "altura": 170, "nascimento": 1984 }
> console.log(peso)
70
> console.log(idade)
36
> console.log(resto)
{ altura: 170, nascimento: 1984 }

É possível ainda construir novos arrays “desembrulhando” valores de outros arrays.

> const array1 = [ 70, 36 ]
> const array2 = [ "setenta", "trintaeseis" ]
> const array3 = [...array1, ...array2 ]
> console.log(array3)
[ 70, 36, 'setenta', 'trintaeseis' ]

Da mesma forma é possível construir novo objetos “desembrulhando” valores de outros objetos.

> const obj1 = { "idade": 36, "peso": 70 }
> const obj2 = { "nome": "Fabio" }
> const obj3 = { "funcao": "Piloto", ...obj1, ...obj2 }
> console.log(obj3)
{ funcao: 'Piloto', idade: 36, peso: 70, nome: 'Fabio' }

A sintaxe de destructuring também serve para passagem de parâmetros para funções.

> f = function([idade, peso]) {
    console.log("idade", idade);
    console.log("peso", peso);
  }
> f([ 36, 70 ])
idade 36
peso 70

O mesmo do exemplo acima, mas usando um objeto.

> f = function ({ idade, peso }) {
    console.log("peso", peso);
    console.log("idade", idade);
  }
> f({ "peso": 70, "idade": 36 })
peso 70
idade 36

Referências

  • https://cursos.alura.com.br/destructuring-em-js-c308
    • Aula da https://github.com/juunegreiros
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment