JS - Desconstruindo o Destructuring (Arrays)

 Continuando a nossa série sobre novos recursos implementados na linguagem Javascript nos últimos anos, teremos a segunda parte sobre Destructuring, dessa vez, falaremos sobre Arrays, que traz em si muitas coisas similares mas também recursos únicos em comparação aos Objetos. Caso você não tenha visto a primeira parte, clique aqui para acessá-la.

Bem, em alguns pontos, o Destructuring com Arrays funciona de forma muito similar a com Objetos, mas veremos abaixo o que muda de um para o outro. Por exemplo, para quem não sabe, Arrays, diferente de Objetos, possuem um ordenamento, então ele começa com um índice que vai de 0 a N, sendo 0 o seu primeiro item. Então, nesse caso, o Destructuring irá respeitar essas posições.

Exemplo:

const personagens = ["Mario", "Sonic", "MegaMan"];
const [ pNintendo, pSega ] = personagens;

console.log(pNintendo); // "Mario"
console.log(pSega); // "Sonic"

Como vimos, a escolha não é aleatória, ela respeita as primeiras posições do Array e, claro, sem modificar o Array em si.
Caso necessário, há a possibilidade de omitir itens caso tenha algum deles que não nos seja interessante.

Então é possível fazer dessa maneira:

const personagens = ["Mario", "Sonic", "MegaMan"];
const [ pNintendo, , pCapcom ] = personagens;

console.log(pNintendo); // "Mario"
console.log(pCapcom); // "MegaMan"

Ou seja, utilizando esse "espaço" em branco, podemos ignorar um determinado elemento do Array.

Também há a alternativa de modificar o valor de alguma variável que já tenha sido previamente atribuída utilizando o Destructuring, além de podermos, assim como em Objetos, passar valores padrões.

Exemplo:

// Nosso Array de personagens
const personagens = ["Mario", "Sonic", "MegaMan"];
// Variáveis já atribuídas previamente
let pNintendo = "Luigi", pSega = "Alex Kid";
// Reatribuindo e passando um valor Default para uma variável não existente
[ pNintendo, pSega, pKonami = "Snake" ] = personagens;

console.log(pNintendo); // "Mario"
console.log(pKonami); // "Snake"

Outra coisa muito legal é que temos a escolha de utilizar o Destructuring com Arrays juntamente com outro recurso muito útil que veio inserido no Ecmascript 2015: os parâmetros Rest, que merecem um artigo só para eles depois. Mas, em resumo, é uma forma de incluir todos os itens de um Array ou uma determinada parte dele, em outro Array ou Objeto. Também tem outras funcionalidades, em funções, por exemplo, mas fica para outro post.

Então, é possível utilizar os parâmetros Rest, simbolizados pelos símbolos de reticências [...] Destructuring para copiar parte do Array para outro Array.

Exemplo:

const personagens = ["Mario", "Sonic", "MegaMan"];

// Utilizamos o parâmetro Rest para copiar o resto dos personagens para um outro array chamado restPersonagens
let [ pNintendo, ...restPersonagens ] = personagens;

console.log(pNintendo) // "Mario";
console.log(restPersonagens[0]) ]] // "Sonic";
console.log(restPersonagens[1]) ]] // "MegaMan";

// Clonando todo o Array
const [ ...personagensClones ] = personagens;
console.log(personagensClones) // ["Mario", "Sonic", "MegaMan"];

Bom, por hoje é só. Na próxima e última parte, veremos como misturar Arrays e Objetos com Destructuring.

Valeu!