Operador de Desestruturação

Operador de Desestruturação

Em toda linguagem de programação, nós temos diversos tipos de operadores, incluindo os operadores clássicos, como é caso dos:

Durante o ES6 (ECMASCRIPT 2015) foi adicionado a linguagem Javascript, um novo tipo de operador, conhecido como Operador Desestruturado (Destructuring).

A sintaxe de atribuição de desestruturação é uma expressão JavaScript que torna possível descompactar valores de arrays ou propriedades de objetos em variáveis distintas.

Nesse caso, é como separar cada item existente dentro de uma matriz e transforma-los em variáveis distintas e separadas umas das outras.

Trabalhando com Desestruturação (Arrays)

Para que você possa entender como funciona o processo de desestruturação, vamos imaginar que você possui um simples array que contém 5 números:

let meuArray = [1, 2, 3, 4, 5];

Se você quiser selecionar algum dos valores presentes dentro daquele array, basta usarmos os colchetes informando dentre deles o índice que queremos selecionar:

meuArray[0];//1
meuArray[1];//2
meuArray[2];//3
meuArray[3];//4
meuArray[4];//5

Esse método que acabamos de ver, é considerado um pouco antigo para alguns, visto que hoje em dia já existem outras maneiras de se fazer essa seleção de itens.

Uma delas, é fazendo o uso da desestruturação, da seguinte forma:

let [ indiceUm, indiceDois, indiceTres, indiceQuatro, indiceCinco ] = meuArray;

Como podemos observar, nos definimos um apanhado de variáveis (indiceUm, indiceDois, indiceTres, indiceQuatro, indiceCinco) do tipo let dentro do colchetes [], separados por vírgulas.

Onde fizemos uma atribuição a variável meuArray, que por sua vez contém a matriz de 5 elementos.

Quando fazemos isso, estamos dizendo ao JS, que ele faça a atribuição de cada elemento, dentro de cada variável que foi declarada dentro dos colchetes.

Nesse caso, o índice 0 da matriz que armazena o valor 1, será salvo dentro da variável indiceUm, e assim por diante.

De tal modo, que mais tarde é selecionar a variável em vez do índice, vejamos:

let meuArray = [1, 2, 3, 4, 5];

let [ indiceUm, indiceDois, indiceTres, indiceQuatro, indiceCinco ] = meuArray;

console.log(indiceUm);//1
console.log(indiceDois);//2
console.log(indiceTres);//3
console.log(indiceQuatro);//4
console.log(indiceCinco);//5

É importante ressaltar que você pode pular certos elementos, como é o caso do exemplo abaixo:

let meuArray = [1, 2, 3, 4, 5];

let [ indiceUm, indiceDois, ,indiceQuatro, indiceCinco ] = meuArray;

console.log(indiceUm);//1
console.log(indiceDois);//2
console.log(indiceQuatro);//4
console.log(indiceCinco);//5

Perceba que o indiceTres não foi declarado dessa vez, mas eu deixei um espaço em branco durante a declaração dessas variáveis.

Com isso o JS automaticamente entende que o índice 2 do meuArray não deverá ser atribuído a variável nenhuma.

Também é possível definir um valor padrão para a variável, caso o índice não exista, vejamos:

const [n1, n2, n3, n4 = 55] = [1, 2, 3];

console.log(n4);//55

Caso n4 não estivesse "setado" com um valor padrão, o retorno seria undefined, pois não há nenhum valor no array que possa preenche-lo.

const [n1, n2, n3, n4] = [1, 2, 3];

console.log(n4);//undefined

Também é possível selecionar elementos que estão aninhados dentro dos arrays, vejamos:

const [[n1, n2], [n3, n4]] = [[1, 2], [3, 4]];

console.log(n1);//1
console.log(n2);//2
console.log(n3);//3
console.log(n4);//4

Desestruturando Objetos

Também é possível fazer a desestruturação de objetos, veja como é fácil.

Supondo que você tenha o seguinte objeto abaixo:

let informacoes = {
nome: 'Micilini',
site: 'micilini.com',
https: true
}

Como você já sabe, para selecionarmos algum elemento desse objeto, fazemos isso por meio da chave usando o ponto, da seguinte forma:

console.log(informacoes.nome);//Micilini
console.log(informacoes.site);//micilini.com
console.log(informacoes.https);//true

Dependendo da forma como o sistema em si foi desenvolvido, o código pode se tornar difícil de se entender, e é aí que a desestruturação pode ser útil:

let { nome, site, https } = informacoes;

console.log(nome);//Micilini
console.log(site);//micilini.com
console.log(https);//true

É importante ressaltar que o nome das variáveis devem ser do mesmo nome das chaves do objeto para que o JS faça a atribuição.

Se definirmos o nome de uma variável que não existe, como por exemplo sites com s no final:

let informacoes = {
nome: 'Micilini',
site: 'micilini.com',
https: true
}

let { nome, sites, https } = informacoes;

console.log(nome);//Micilini
console.log(sites);//undefined
console.log(https);//true

O resultado será undefined.

Também é possível definir um valor padrão para a variável, caso a chave não exista, ou não esteja declarada:

let informacoes = {
nome: 'Micilini',
site: 'micilini.com',
https: true
}

let { nome, ssl = true, https } = informacoes;

console.log(ssl);//true
console.log(https);//true

Será que é possível definir nomes diferentes para as variáveis? Sim, para isso precisamos seguir a lógica abaixo:

let dados = {
nome: 'Micilini',
idade: 27
}

let { nome: outroNome, idade: outraIdade } = dados;

console.log(outroNome);//Micilini
console.log(outraIdade);//27

Desestruturação em Objetos Aninhados

Também é possível desestruturar objetos que estão aninhados, veja como é fácil:

let dados = {
nome: 'Micilini',
outros: {
https: true
}
}

let { outros: { https } } = dados;

console.log(https);//true

Usando a Desestruturação em Funções

Da mesma forma como acontece com o spread operator, que é capaz de separar os valores de um array entre os argumentos de uma função.

Isso também é possível de ser feito usando a desestruturação.

let dados = {
nome: "Micilini",
idade: 25, 
nivel: 1,
};

function mostrarDados({nome, idade, nivel}){
console.log('Nome: ' + nome + ', Idade: ' + idade + ', Nível: ' + nivel);
}

mostrarDados(dados);

Como vimos anteriormente, basta apenas passar os objetos para dentro da função normalmente, e na declaração dos argumentos, você insere o nome das variáveis encapsuladas com as chaves.

Outro exemplo de desestruturação:

function exemplo(a, b) {
return [a + b, a * b]
}

let valor = exemplo(2, 5);
console.log(valor);//[7, 10]

//Separando em formato de desestruturação

let [adicao, multiplicacao] = sample(2, 5);

console.log(adicao);//7
console.log(multiplicacao);//10

Lembrando que também é possível usar a mesma lógica de valores padrão:

function testar({nome, idade = 0}){
console.log('Nome: ' + nome + ', Idade: ' + idade);
}

const dados = {
nome: 'Micilini'
}

testar(dados);//Nome: Micilini, Idade: 0

Nos três exemplos acima, nós fizemos isso usando objetos, por isso declaramos as chaves dentro dos parêntesis dos argumentos da função, agora vejamos como fica isso usando arrays.

function testar([nome, idade = 0]){
console.log('Nome: ' + nome + ', Idade: ' + idade);
}

let meuArray = ['Micilini'];

testar(meuArray);

No caso dos arrays, a diferença é que encapsulamos pelos colchetes e não pelos chaves (como estávamos fazendo nos objetos).

Conclusão

Neste conteúdo nós aprendemos um pouco mais sobre o operador de desestruturação, que é capaz de desestruturar um array ou um objeto de modo a separa-los em suas respectivas variáveis.

Até a próxima jornada 🤓