Rodrigo Brito - JS-0803 - JavaScript Completo ES6 - Destructuring
Publicado em 23/05/2021 13h11
A utilização de destructuring, permite que as propriedades de objetos e arrays sejam atribuídas à nova variáveis, simplificando o acesso e a utilização destes valores. Desta forma, os dados de objetos podem ser acessados facilmente sem utilização da "dot notation" e de arrays sem a utilização de índices.
Para utilizar a desestruturação é necessário declarar uma variável com as propriedades do objeto ou array entre chaves e a igualar ao alvo. Os nomes das propriedades devem ser iguais aos contidos no objeto ou array, caso contrário, não será identificável a referência. Ex:
Utilizando dot notation:
Utilizando destructuring:
Em um nível único de um objeto talvez não seja tão atraente, mas em objetos com grande profundidade a desestruturação se mostra útil, evitando repetição de declarações. Ex:
Há a possibilidade de aninhamento (nesting) na desestruturação, incluindo uma dentro da outra, exemplo:
Os nomes das propriedades podem ser alterados, colocando dois pontos e o nome a ser dado após cada propriedade, da seguinte forma:
Quando é utilizada uma propriedade que não existe em uma desestruturação o valor retornado será undefined, mas é possível o modificar no momento da desestruturação:
O destructuring de arrays é realizado colocando as variáveis entre colchetes:
Também é possível realizar a desestruturação de argumentos de funções. Quando um argumento é um objeto ou array, ele pode ser desestruturado nos mesmos formatos apresentados. No exemplo abaixo, o event foi desestruturado na segunda função, retornando somente key (uma das propriedades de event que retorna o valor do botão pressionado pelo usuário) sem necessidade do ponto. Ex: