Array Destructuring no Javascript, você sabe o que é?
Tags: javascript, node, braziliandevs, learning
Published: 2024-02-08 22:15:59

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](#o-que-o-linter-queria-que-eu-soubesse)
- [Pulando valores](#pulando-valores)
- [Atribuindo o resto do vetor](#atribuindo-o-resto-do-vetor)
- [Vetores e funções](#vetores-e-funções)
- [Usando valores iniciais](#usando-valores-iniciais)
- [Passando na entrevista de emprego](#passando-na-entrevista-de-emprego)
- [Conclusão](#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:

```javascript
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:

```javascript
let frase = ["Eu", "quero" , "jogar", "minecraft"];
let [pessoa, vontade] = frase;

console.log(pessoa); //"Eu"
console.log(vontade); //"quero"
```

Também podemos fazer desse jeito:

```javascript
let [pessoa, vontade] = ["Eu", "quero" , "jogar", "minecraft"];

console.log(pessoa); //"Eu"
console.log(vontade); //"quero"
```

Ou assim:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
// :)
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?

```javascript
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:

```javascript
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:

```javascript
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`:

```javascript
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:

```javascript
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:

```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment).