Obs: Essa carta faz parte do conteúdo da Plataforma Front Academy.

Caro Aluno,

O ​destructuring assignment (ou só destructuring) é uma sintaxe dentro do JavaScript que, embora a princípio estranha, é muito ​utilizada e importantíssima de se compreender.

Essa sintaxe faz parte do ECMAScript 6​​, que introduziu novas funcionalidades ao JavaScript em 2015 (e por isso é também conhecido como ECMAScript 2015). Essa famosa atualização trouxe novas funcionalidades que logo passaram a fazer parte de todos os códigos escritos em JavaScript e por isso poderíamos dizer que é uma forma ​​"moderna" ​de se escrever JavaScript.

Embora pouco intuitiva a princípio, é uma sintaxe que logo ficará muito clara e muito simples para você, independente do seu nível de conhecimento de JavaScript.

Vamos entender ela a fundo com alguns exemplos abaixo, e caso ainda fique alguma dúvida ao final dessa aula, tenha certeza que estamos sempre prontos a te ajudar, em especial no nosso canal do Discord.

O que é o destructuring assignment?

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

Vamos utilizar nesse primeiro exemplo o useState do React, que utiliza o destructuring como forma padrão de se escrever, como podemos ver na documentação do useState no React.

A sintaxe acima é o que conhecemos como destructuring​, uma sintaxe visualmente estranha e pouco intuitiva para alguém que não está familiarizado com ela.

Na documentação do MDN Web Docs, essa sintaxe é descrita da seguinte forma:

A sintaxe destructuring assignment​ é uma expressão em JavaScript que permite que peguemos os valores de arrays, ou propriedades de objetos, em variáveis distintas. (​MDN Web Docs​)

Usando o destructuring com arrays

Vamos entender primeiro o que significa pegar os valores de um array, utilizando o exemplo abaixo:

const frutas = ['laranja', 'maçã', 'banana']

​ Criamos um array chamado frutas​ com três strings ​dentro, ​*"laranja"*, "maçã" e "banana".​

Supondo que queremos pegar cada um desses valores do array e salvar em suas próprias variáveis, poderíamos fazer da seguinte forma:

const frutas = ['laranja', 'maçã', 'banana']

const fruta1 = frutas[0] // 'laranja'
const fruta2 = frutas[1] // 'maçã'
const fruta3 = frutas[2] // 'banana'

​ ​Dessa forma, temos três varíaveis distintas, uma para cada elemento do array.

Agora, vamos observar esse mesmo código, porém dessa vez utilizando o ​destructuring​:

const frutas = ['laranja', 'maçã', 'banana']
​
const [fruta1, fruta2, fruta3] = frutas

O resultado é o mesmo, porém dessa vez economizamos algumas linhas de código e tornamos o nosso código mais limpo... e com sorte, mais claro também.

Esse tipo de sintaxe, que tem como objetivo facilitar a escrita de um determinado código, é conhecido como ​Syntatic Sugar​, ou seja, uma sintaxe que tenta "adocicar" o código, fazer algo de uma maneira mais simples. Elas são muito comuns quando um determinado tipo de código se repete muitas vezes dentro de uma linguagem, como é o caso de pegar valores em um array (ou objeto) em JavaScript.

Tendo entendido o destructuring, vamos voltar ao exemplo da documentação do React sobre o useState:

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

O que podemos observar agora é que em uma única linha nós fazemos duas coisas distintas:

1. Executamos a função useState passando um valor inicial 0 - (que por sua vez retorna um array com dois valores)

2. Pegamos os dois valores do retorno dessa função e salvamos em duas variáveis separadas: count e setCount

Talvez você ainda não tenha conseguido visualizar esse array com dois valores, e por isso vamos fazer agora o caminho contrário, ou seja, vamos "desadocicar" esse código:

const myState = useState(0) // [value, dispatch]

const count = myState[0] // 0
const setCount = myState[1] // function(newValue) {}

Com sorte, você vai conseguir ver agora que o retorno da função ​​useState​, salvo na variável myState, é um array com dois valores dentro ​​[value, dispatch]​​, e que logo em seguida pegamos esses valores atribuindo a eles uma variável distinta para cada, ​​​count​​ e ​​setCount​​.

O que cada um desses valores representam está fora do escopo desse conteúdo, mas você pode estudar mais em nosso artigo sobre useState.

Por hora, você precisa apenas entender como funciona o destructuring.

Usando o destructuring com objetos

Agora que você sabe utilizar o ​destructuring​ com arrays, fica muito simples entender ele com objetos. Vejamos o código a seguir sem o uso do ​destructuring:

const pessoa = {
  nome: 'João',
  idade: 30,
  altura: 171,
}

const nome = pessoa.nome // 'João'
const idade = pessoa.idade // 30
​const altura = pessoa.altura // 171

​E agora, esse mesmo código utilizando o ​destructuring:

const pessoa = {
  nome: 'João',
  idade: 30,
  altura: 171,
​}

const { nome, idade, altura } = pessoa

Muito mais simples certo? Muito mais "adocicado".

Esse tipo de destructuring em objetos é muito comum em JavaScript.

No React, é muito utilizado principalmente ao definir os props de um componente.

Vejamos esses três últimos exemplos de um componente React sem o ​destructuring, esse mesmo componente utilizando o destructuring e por último um exemplo da forma preferida de se escrever​:

// Sem destructuring
function Button(props) {
  const label = props.label
  const onClick = props.onClick
}

// Com destructuring dentro do componente
function Button(props) {
  const { label, onClick } = props
}

// Com destructuring direto nos props.
// (Essa é a forma mais utilizada, economizando linhas de código)
​function Button({ label, onClick }) {
  ...
}

Conclusão

​Esperamos que com esse conteúdo você possa entender melhor o que é o ​destructuring assignment​ e consiga utilizá-lo no seu dia a dia.

E como não custa lembrar, estamos sempre a disposição para ajudá-lo em nosso canal do Discord.