Entendendo as sintaxes de desestruturação, parâmetros rest e espalhamento em JavaScript

A desestruturação de objetos permite que você crie novas variáveis usando uma propriedade de objeto como o valor.

Considere este exemplo, onde um objeto que representa uma nota com um id, title e date:

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
}

Tradicionalmente, se você quisesse criar uma nova variável para cada propriedade, você teria que atribuir cada variável individualmente, com muitas repetições:

// Create variables from the Object properties
const id = note.id
const title = note.title
const date = note.date

Com a desestruturação de objetos, tudo isso pode ser feito em uma linha. Ao colocar cada variável entre chaves {}, o JavaScript criará novas variáveis a partir de cada propriedade com o mesmo nome:

// Destructure properties into variables
const { id, title, date } = note

Agora, use o console.log() nas novas variáveis:

console.log(id)
console.log(title)
console.log(date)

Você receberá os valores originais das propriedades como resultado:

Output
1
My first note
01/01/1970

A atribuição padrão para a desestruturação de objetos cria novas variáveis com o mesmo nome que a propriedade do objeto. Se você não quiser que a nova variável tenha o mesmo nome que o nome da propriedade, você também tem a opção de renomear a nova variável usando dois pontos (:) para decidir um novo nome, como visto com o noteId no seguinte exemplo:

// Assign a custom name to a destructured value
const { id: noteId, title, date } = note

Registre a nova variável noteId no console:

console.log(noteId)

Você receberá o seguinte resultado:

Output
1

Você também pode desestruturar valores aninhados de objetos. Por exemplo, atualize o objeto note para que tenha um objeto aninhado author:

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
  author: {
    firstName: 'Sherlock',
    lastName: 'Holmes',
  },
}

Agora, você pode desestruturar o note, então desestruturar novamente para criar variáveis a partir das propriedades de author:

// Destructure nested properties
const {
  id,
  title,
  date,
  author: { firstName, lastName },
} = note

Em seguida, registre as novas variáveis firstName e lastName usando os template literals:

console.log(`${firstName} ${lastName}`)

Isso dará o seguinte resultado:

Output
Sherlock Holmes

Observe que neste exemplo, embora você tenha acesso ao conteúdo do objeto author, o objeto author em si não está acessível. Para acessar um objeto, bem como seus valores aninhados, você teria que declará-los separadamente:

// Access object and nested values
const {
  author,
  author: { firstName, lastName },
} = note

console.log(author)

Este código irá gerar o objeto author como resultado:

Output
{firstName: "Sherlock", lastName: "Holmes"}

Desestruturar um objeto é útil não apenas para reduzir a quantidade de código que você precisa escrever, mas também permite que você mire seu acesso nas propriedades que julga importantes.

Por fim, a desestruturação pode ser utilizada para acessar as propriedades de objetos de valores primitivos. Por exemplo, String é um objeto global para strings e possui uma propriedade length (comprimento):

const { length } = 'A string'

Isso encontrará a propriedade de comprimento inerente de uma string e a definirá como sendo igual à variável length. Registre length para ver se o processo funcionou:

console.log(length)

Você receberá o seguinte resultado:

Output
8

Aqui, a string A string foi implicitamente convertida em um objeto para recuperar a propriedade length.

A desestruturação de matrizes permite que você crie novas variáveis usando um item de uma matriz como valor. Considere este exemplo, onde há uma matriz com as várias partes de uma data:

const date = ['1970', '12', '01']

As matrizes em JavaScript garantem a preservação de sua ordem. Dessa forma, neste caso, o primeiro índice será sempre um ano, o segundo será o mês e assim por diante. Sabendo isso, você pode criar variáveis a partir dos itens da matriz:

// Create variables from the Array items
const year = date[0]
const month = date[1]
const day = date[2]

Apesar disso, fazer isso manualmente pode tomar muito espaço do seu código. Com a desestruturação da matriz, você pode descompactar os valores da matriz em ordem e atribuí-los às suas próprias variáveis, desta forma:

// Destructure Array values into variables
const [year, month, day] = date

Agora, registre as novas variáveis:

console.log(year)
console.log(month)
console.log(day)

Você receberá o seguinte resultado:

Output
1970
12
01

Os valores podem ser ignorados deixando a sintaxe de desestruturação em branco entre vírgulas:

// Skip the second item in the array
const [year, , day] = date

console.log(year)
console.log(day)

Ao executar isso, você receberá o valor de year (ano) e day (dia):

Output
1970
01

As matrizes aninhadas também podem ser desestruturadas. Primeiro, crie uma matriz aninhada:

// Create a nested array
const nestedArray = [1, 2, [3, 4], 5]

Em seguida, desestruture aquela matriz e registre as novas variáveis:

// Destructure nested items
const [one, two, [three, four], five] = nestedArray

console.log(one, two, three, four, five)

Você receberá o seguinte resultado:

Output
1 2 3 4 5

A sintaxe de desestruturação pode ser aplicada na desestruturação dos parâmetros em uma função. Para testar isso, você irá desestruturar as keys (chaves) e values (valores) do Object.entries().

Primeiro, declare o objeto de note:

const note = {
  id: 1,
  title: 'My first note',
  date: '01/01/1970',
}

Dado este objeto, você poderia listar os pares de chave de valor através da desestruturação de argumentos à medida em que eles são passados ao método forEach():

// Using forEach
Object.entries(note).forEach(([key, value]) => {
  console.log(`${key}: ${value}`)
})

Ou você poderia alcançar o mesmo resultado usando um loop for:

// Using a for loop
for (let [key, value] of Object.entries(note)) {
  console.log(`${key}: ${value}`)
}

De qualquer maneira, você receberá o seguinte:

Output
id: 1
title: My first note
date: 01/01/1970

A desestruturação de objetos e de matrizes podem ser combinadas em uma única atribuição de desestruturação. Os parâmetros padrão também podem ser usados com a desestruturação, como visto no exemplo a seguir que define a data como new Date().

Primeiro, declare o objeto de note:

const note = {
  title: 'My first note',
  author: {
    firstName: 'Sherlock',
    lastName: 'Holmes',
  },
  tags: ['personal', 'writing', 'investigations'],
}

Em seguida, desestruture o objeto, ao mesmo tempo em que você também define uma nova variável date com o padrão de new Date():

const {
  title,
  date = new Date(),
  author: { firstName },
  tags: [personalTag, writingTag],
} = note

console.log(date)

Então, o console.log(date) gerará um resultado semelhante ao seguinte:

Output
Fri May 08 2020 23:53:49 GMT-0500 (Central Daylight Time)

Como mostrado nesta seção, a sintaxe de atribuição de desestruturação adiciona muita flexibilidade ao JavaScript e permite que você escreva códigos mais sucintos. Na próxima seção, você verá como a sintaxe de espalhamento pode ser utilizada para expandir estruturas de dados nas entradas de dados constituintes.

O espalhamento simplifica as tarefas comuns com matrizes. Por exemplo, vamos supor que você tenha duas matrizes e deseja combiná-las:

// Create an Array
const tools = ['hammer', 'screwdriver']
const otherTools = ['wrench', 'saw']

Originalmente, você usaria o concat() para concatenar as duas matrizes:

// Concatenate tools and otherTools together
const allTools = tools.concat(otherTools)

Agora, você também pode usar o espalhamento para descompactar as matrizes em uma nova matriz:

// Unpack the tools Array into the allTools Array
const allTools = [...tools, ...otherTools]

console.log(allTools)

Executar isso resultaria no seguinte:

Output
["hammer", "screwdriver", "wrench", "saw"]

Isso pode ser particularmente útil com a imutabilidade. Por exemplo, você poderia estar trabalhando com um app que possui users (usuários) armazenados em uma matriz de objetos:

// Array of users
const users = [
  { id: 1, name: 'Ben' },
  { id: 2, name: 'Leslie' },
]

Você poderia usar o push para modificar a matriz existente e adicionar um novo usuário, o que seria a opção mutável:

// A new user to be added
const newUser = { id: 3, name: 'Ron' }

users.push(newUser)

Mas isso altera a matriz user, que pode ser que queiramos preservar.

O espalhamento permite que você crie uma nova matriz a partir de uma existente e adicione um novo item no final:

const updatedUsers = [...users, newUser]

console.log(users)
console.log(updatedUsers)

Agora, a nova matriz updatedUsers possui o novo usuário, mas a matriz users original permanece inalterada:

Output
[{id: 1, name: "Ben"}
 {id: 2, name: "Leslie"}]

[{id: 1, name: "Ben"}
 {id: 2, name: "Leslie"}
 {id: 3, name: "Ron"}]

Criar cópias de dados em vez de alterar dados existentes ajuda a evitar alterações inesperadas. Em JavaScript, quando você cria um objeto ou matriz e a atribui a outra variável, você não está criando, de fato, um novo objeto — você está passando uma referência.

Observe este exemplo, onde uma matriz é criada e atribuída a outra variável:

// Create an Array
const originalArray = ['one', 'two', 'three']

// Assign Array to another variable
const secondArray = originalArray

Remover o último item da segunda matriz modificará o primeiro:

// Remove the last item of the second Array
secondArray.pop()

console.log(originalArray)

Isso dará o resultado:

Output
["one", "two"]

O espalhamento permite que você crie uma cópia superficial de uma matriz ou objeto. Isso significa que qualquer propriedade de nível superior será clonada, mas objetos aninhados ainda serão passados por referência. Para matrizes ou objetos simples, uma cópia superficial pode ser tudo o que você precisa.

Se você escrever o mesmo código de exemplo, mas copiar a matriz com o espalhamento, a matriz original não será mais modificada:

// Create an Array
const originalArray = ['one', 'two', 'three']

// Use spread to make a shallow copy
const secondArray = [...originalArray]

// Remove the last item of the second Array
secondArray.pop()

console.log(originalArray)

O seguinte ficará registrado no console:

Output
["one", "two", "three"]

O espalhamento também pode ser usado para converter um conjunto, ou qualquer outro iterável em uma matriz.

Crie um novo conjunto e adicione algumas entradas a ele:

// Create a set
const set = new Set()

set.add('octopus')
set.add('starfish')
set.add('whale')

Em seguida, utilize o operador de espalhamento com o set (conjunto) e registre os resultados:

// Convert Set to Array
const seaCreatures = [...set]

console.log(seaCreatures)

Isso resultará no seguinte:

Output
["octopus", "starfish", "whale"]

Isso também pode ser útil para criar uma matriz a partir de uma string:

const string = 'hello'

const stringArray = [...string]

console.log(stringArray)

Isso resultará em uma matriz com cada caractere sendo um item na matriz:

Output
["h", "e", "l", "l", "o"]

Ao trabalhar com objetos, o espalhamento pode ser usado para copiar e atualizar objetos.

Originalmente, o Object.assign() era usado para copiar um objeto:

// Create an Object and a copied Object with Object.assign()
const originalObject = { enabled: true, darkMode: false }
const secondObject = Object.assign({}, originalObject)

O secondObject será agora um clone do originalObject.

Isso é simplificado com a sintaxe de espalhamento — você pode copiar um objeto superficialmente, espalhando-o em um novo:

// Create an object and a copied object with spread
const originalObject = { enabled: true, darkMode: false }
const secondObject = { ...originalObject }

console.log(secondObject)

Isso dará como resultado o seguinte:

Output
{enabled: true, darkMode: false}

Assim como com matrizes, isso criará apenas uma cópia superficial e objetos aninhados ainda serão passados por referência.

Adicionar ou modificar propriedades em um objeto existente de maneira imutável torna-se mais simplificado com o espalhamento. Neste exemplo, a propriedade isLoggedIn é adicionada ao objeto user:

const user = {
  id: 3,
  name: 'Ron',
}

const updatedUser = { ...user, isLoggedIn: true }

console.log(updatedUser)

Isso irá mostrar o seguinte:

Output
{id: 3, name: "Ron", isLoggedIn: true}

Uma coisa importante a se notar com a atualização de objetos através do espalhamento é que qualquer objeto aninhado também terá que ser espalhado. Por exemplo, vamos supor que no objeto user existe um objeto organization aninhado:

const user = {
  id: 3,
  name: 'Ron',
  organization: {
    name: 'Parks & Recreation',
    city: 'Pawnee',
  },
}

Se você tentasse adicionar um novo item ao organization, ele substituiria os campos existentes:

const updatedUser = { ...user, organization: { position: 'Director' } }

console.log(updatedUser)

Isso resultaria no seguinte:

Output
id: 3
name: "Ron"
organization: {position: "Director"}

Se a mutabilidade não for um problema, o campo poderia ser atualizado diretamente:

user.organization.position = 'Director'

Mas como estamos buscando uma solução imutável, podemos espalhar o objeto interno para reter as propriedades existentes:

const updatedUser = {
  ...user,
  organization: {
    ...user.organization,
    position: 'Director',
  },
}

console.log(updatedUser)

Isso resultará no seguinte:

Output
id: 3
name: "Ron"
organization: {name: "Parks & Recreation", city: "Pawnee", position: "Director"}

O espalhamento também pode ser usado com argumentos em chamadas de função.

Como um exemplo, aqui está uma função multiply que recebe três parâmetros e os multiplica:

// Create a function to multiply three items
function multiply(a, b, c) {
  return a * b * c
}

Normalmente, você passaria três valores individualmente como argumentos para a chamada de função, desta forma:

multiply(1, 2, 3)

Isso resultaria no seguinte:

Output
6

No entanto, se todos os valores que você deseja passar para a função já existirem em uma matriz, a sintaxe de espalhamento permitirá que você utilize cada item em uma matriz como um argumento:

const numbers = [1, 2, 3]

multiply(...numbers)

Isso gerará o mesmo resultado:

Output
6

multiply.apply(null, [1, 2, 3])

Output
6

Agora que você viu como o espalhamento pode encurtar seu código, dê uma olhada em um outro uso da sintaxe ...: os parâmetros rest.