Atribuição de Desestruturação em Array no JavaScript

Neste tutorial você aprenderá como usar a atribuição de desestruturação da versão ES6 que permite transformar um array em variáveis individuais.

English version: https://www.javascripttutorial.net/es6/destructuring/

A versão ES6 do JavaScript fornece um novo recurso chamado atribuição de desestruturação que permite desestruturar as propriedades de um objeto ou elementos de um array em variáveis individuais.

Introdução à desestruturação de array

Suponha que você tenha uma função que permite retornar um array de números da seguinte maneira:

O seguinte código invoca a função getScores() e atribui o valor retornado a uma variável scores:

Para obter a pontuação individual, você precisa fazer dessa forma:

Antes da versão ES6, não havia uma maneira direta de atribuir os elementos de um array retornado a várias variáveis, como x, y e z.

Felizmente, a partir da ES6, você pode usar a atribuição de desestruturação da seguinte maneira:

As variáveis x, y e z assumirão os valores do primeiro, segundo e terceiro elemento do array retornado.

Observe que os colchetes [] parece com a sintaxe de array, mas nesse caso não cria um array.

Se a função getScores() retornar um array de dois elementos, a terceira variável terá o valor de undefined, assim:

Caso a função getScores() retorne um array com mais de três elementos, os elementos restantes serão descartados. Por exemplo:

Desestruturação de array e a sintaxe Rest

É possível pegar todos os elementos restantes de um array e colocá-los em um novo array usando a sintaxe de Rest que é representada por 3 pontos ..., observe o exemplo a seguir:

As variáveis x e y recebem valores dos dois primeiros elementos do array que foi retornado. Já a variável args recebe todos os outros argumentos restantes, que são os dois últimos elementos do array retornado.

Observe que é possível desestruturar um array na atribuição que se separa da declaração da variável. Por exemplo:

Configurando o valor padrão

Veja o exemplo:

Entenda como esse código é interpretado:

• Primeiro, declare a função getItems() que retorna um array de dois números.
• Em seguida, atribua a variável items o array que foi retornado da função getItems().
• Cheque se o terceiro elemento items[2] existe no array, caso não existir, atribua o valor 0 à variável thirdItem.

Mas seria mais simples com a atribuição de desestruturação com um valor padrão:

Se o valor obtido do array for undefined você pode atribuir um valor padrão à variável, como este:

Se a função getItems() não retornar um array e você espera um array, a atribuição de desestruturação resultará em um erro, por exemplo:

Erro:

Uma maneira típica de resolver isso é fazer o fallback do valor retornado da função para um array vazio, desta forma:

Desestruturação de array aninhado

A função a seguir retorna um array que contém um elemento que é outro array, ou seja, um array aninhado:

Como o terceiro elemento do array retornado é um outro array, você precisa usar a sintaxe de desestruturação de array aninhado para desestruturar de forma correta, por exemplo:

Aplicações de atribuição de desestruturação de array

Vejamos alguns exemplos práticos do uso da sintaxe de atribuição de desestruturação de array.

2) Variáveis de troca

A desestruturação de array facilita a troca de valores de variáveis sem usar uma variável temporária:

2) Funções que retornam vários valores

Em JavaScript, uma função pode retornar um valor. No entanto, você pode retornar um array que contém vários valores, por exemplo:

E então você usa a sintaxe de atribuição de desestruturação do array para desestruturar os elementos do array de retorno em variáveis:

Neste tutorial, você aprendeu como usar a atribuição de desestruturação (que veio com a versão ES6) para poder desestruturar os elementos de um array em variáveis individuais.

Mais tutoriais sobre a versão ES6 do JavaScript

Confira uma série de outros tutoriais sobre a versão ES6 JavaScript que eu escrevi, clicando no link abaixo:

Tutoriais JavaScript ES6

Veja o índice de todos os tutoriais JavaScript

Confira uma série de outros tutoriais JavaScript que eu escrevi, clicando no link abaixo:

Tutoriais JavaScript