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