JS-0803 - JavaScript Completo ES6 - Destructuring

JS-0803 - JavaScript Completo ES6 - Destructuring
Publicado em 23/05/2021 13h11
Visualizações: 464

Dividindo para conquistar (o acesso)

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:

JS-0803 - JavaScript Completo ES6 - Destructuring

Utilizando destructuring:

JS-0803 - JavaScript Completo ES6 - 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:

JS-0803 - JavaScript Completo ES6 - Destructuring

Há a possibilidade de aninhamento (nesting) na desestruturação, incluindo uma dentro da outra, exemplo:

JS-0803 - JavaScript Completo ES6 - Destructuring

Os nomes das propriedades podem ser alterados, colocando dois pontos e o nome a ser dado após cada propriedade, da seguinte forma:

JS-0803 - JavaScript Completo ES6 - Destructuring

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:

JS-0803 - JavaScript Completo ES6 - Destructuring

O destructuring de arrays é realizado colocando as variáveis entre colchetes:

JS-0803 - JavaScript Completo ES6 - Destructuring

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:

JS-0803 - JavaScript Completo ES6 - Destructuring

Veja também:

Confira mais artigos relacionados

Este website utiliza cookies próprios e de terceiros a fim de personalizar o conteúdo, melhorar a experiência do usuário, fornecer funções de mídias sociais e analisar o tráfego. Para continuar navegando você deve concordar com nossa Política de Privacidade

Sim, eu aceito. Não, eu não aceito.