Array Destructuring no Javascript, você sabe o que é?

Recentemente eu estava tranquilamente programando em um projeto meu e quando eu inocentemente fui pegar o primeiro valor de um vetor como todo bom programador faz const valor = vetor[0], meu Eslint imediatamente reclamou e me mandou usar algo chamado Array Destructuring, fiquei muito confuso pois nunca tinha ouvido falar de tal técnica.

Se você assim como eu você não sabe o que é isso, veremos hoje tudo sobre essa sintaxe poderosa que faz manipular vetores muito mais agradável.

Sumário

• O que o linter queria que eu soubesse
• Pulando valores
• Atribuindo o resto do vetor
• Vetores e funções
• Usando valores iniciais
• Passando na entrevista de emprego
• Conclusão

O que o linter queria que eu soubesse

Imagine que queremos extrair informações de um vetor, geralmente o que fazemos é algo como o seguinte:

let frase = ["Eu", "quero" , "jogar", "minecraft"]; let pessoa = frase[0]; let jogo = frase[3]; console.log(pessoa); //"Eu" console.log(jogo); //"minecraft" 

Entretanto, no Javascript ES6, foi introduzido o novo método Array Destructuring para extrair informações de um vetor, vejamos como é sua sintaxe utilizando o mesmo exemplo:

let frase = ["Eu", "quero" , "jogar", "minecraft"]; let [pessoa, vontade] = frase; console.log(pessoa); //"Eu" console.log(vontade); //"quero" 

Também podemos fazer desse jeito:

let [pessoa, vontade] = ["Eu", "quero" , "jogar", "minecraft"]; console.log(pessoa); //"Eu" console.log(vontade); //"quero" 

Ou assim:

let pessoa, vontade; [pessoa, vontade] = ["Eu", "quero" , "jogar", "minecraft"]; console.log(pessoa); //"Eu" console.log(vontade); //"quero" 

Note que as 3 maneiras apresentadas apresentam o mesmo resultado, e como é de se esperar, as variáveis tem seus valores atribuídos da esquerda para a direita, então a primeira variável recebe o primeiro valor do vetor, a segunda o segundo e assim por diante.

Pulando valores

Talvez agora você esteja pensando que eu te enganei, pois eu disse que mostraria o mesmo exemplo, porém aqui estamos pegando os dois primeiros valores, ao invés do primeiro e do último, vejamos então como fazer isso:

let [pessoa,,,jogo] = ["Eu", "quero" , "jogar", "minecraft"]; console.log(pessoa); //"Eu" console.log(jogo); //"minecraft" 

O que aconteceu aqui?

Perceba que ao invés de 1 vírgula, aqui nós temos 3, é assim que se faz para "pular" valores na desestruturação, temos a vírgula normal e outras duas adicionais, que indicam que queremos pular dois valores, assim conseguimos replicar o comportamento original de pegar o primeiro e último valor.

Essa vírgula especial também pode ser colocada no começo do vetor, indicando que queremos pular o primeiro valor:

let [,vontade,,jogo] = ["Eu", "quero" , "jogar", "minecraft"]; console.log(vontade); //"quero" console.log(jogo); //"minecraft" 

O operador da vírgula também nos permite fazer algo muito engraçado, pular todos os itens de um vetor:

// :) let [,,,,] = ["Eu", "quero" , "jogar", "minecraft"]; 

Atribuindo o resto do vetor

Tudo que vimos aqui é muito legal, mas ficar escolhendo e pulando valores do vetor dificilmente vai acontecer no mundo real, e se quisermos pegar a primeira variável e colocar o resto em uma outra variável específica?

let [pessoa, ...resto] = ["Eu", "quero" , "jogar", "minecraft"]; console.log(pessoa); //"Eu" console.log(resto); //["quero", "jogar", "minecraft"] 

Vetores e funções

Essa técnica fica especialmente útil quando estamos usando funções que retornam um vetor, assim podemos extrair os valores diretamente:

function retornaVetor() { return ["Eu", "quero" , "jogar", "minecraft"]; } let [pessoa, vontade] = retornaVetor(); console.log(pessoa); //"Eu" console.log(vontade); //"quero" 

Usando valores iniciais

Outra propriedade interessante, podemos usar valores iniciais para nossas variáveis, assim como em funções:

let [pessoa = "Eu", jogo = "minecraft"] = ["eu"]; console.log(pessoa); //"eu" console.log(jogo); //"minecraft" 

No exemplo acima, a variável jogo, usou o valor inicial que demos a ela já que não existia um outro valor no vetor.

Caso você esteja se perguntando o que acontece se colocamos mais variáveis do lado esquerdo do que valores do lado direito, sem usar valores padrão, nesse caso as variáveis sobrando simplesmente recebem undefined:

let [pessoa, vontade, verbo] = ["Eu"]; console.log(pessoa); //"Eu" console.log(vontade); //undefined console.log(verbo); //undefined 

Passando na entrevista de emprego

Agora uma curiosidade:

let a = 3; let b = 6; [a, b] = [b, a]; console.log(a); //6 console.log(b); //3 

Pronto! Agora graças a esse texto você consegue responder se te perguntarem como trocar o valor de duas variáveis sem usar uma terceira :D

Conclusão

Se você já usou React ou React Native antes, Array Destructuring é exatamente o que está acontecendo quando você usa o useState:

const [count, setCount] = useState(0); 

Obrigado por ler e espero que tenha aprendido algo novo hoje ou reforçado o que já sabia! Eu com certeza aprendi muito para escrever esse artigo, se você quer ler mais sobre desestruturação no geral, eu recomendo a documentação da mozilla.