Rodrigo Brito

Dividindo para conquistar (o acesso)

A utilização de destructuring, permite que as propriedades de objetos e arrays sejam atribuídas à novas 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 dados 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: