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.

Comments

[Falcão]

Complementando, também é possível usar a desestruturação em argumentos de uma função:

function fazAlgo([ pessoa, acao ]) {
    console.log(`${pessoa} ${acao}`);
}

fazAlgo([ 'Você' ]); // Você undefined
fazAlgo([ 'Você', 'quer' ]) // Você quer

Ou com valores default:

function fazAlgo([ pessoa = 'Eu', acao = 'nada' ]) {
    console.log(`${pessoa} ${acao}`);
}

fazAlgo([ 'Você' ]); // Você nada
fazAlgo([ 'Você', 'quer' ]) // Você quer

Obrigado ao usuário kht no tabnews pela adição