O que é Javascript Spread Operator, como funciona e como usá-lo

O operador de propagação do JavaScript é um dos recursos mais populares que foram introduzidos no ES6. Este tutorial ajudará você a entendê-lo. Você aprenderá o que é o operador de propagação e como ele funciona. Você também aprenderá como usá-lo para copiar e mesclar arrays e literais de objeto, inserir dados e muito mais.

Introdução ao operador spread JavaScript

O operador Spread é um recurso que permite acessar o conteúdo de um objeto iterável. Objeto iterável é um objeto, ou estrutura de dados, que permite acessar seu conteúdo com for … of loop. O exemplo mais popular de um iterável é um array. Outro exemplo de iterável pode ser objetos literais ou strings .

Quando você queria acessar todo o conteúdo em algum iterável, antes que o operador de propagação existisse, você tinha que usar algum tipo de loop, como o for...ofloop mencionado , ou método, como forEach () . Outra opção eram os índices. O Spread Operator permite que você faça isso muito mais rápido e com muito menos código. Sobre a sintaxe.

A sintaxe do operador spread é simples e fácil de lembrar. Consiste em três pontos ( ...). Esses três pontos são seguidos pelo iterável ( ...someIterable), cujo conteúdo você deseja acessar.

// Create array
const myArray = ['Venus', 'Ares', 'Mars']

// Use spread operator to access content of "myArray" variable
// Syntax: ...someIterable
console.log(...myArray)
// Output:
// 'Venus' 'Ares' 'Mars'

Operador de propagação e literais de objeto

Quando você deseja usar o operador de propagação com literais de objeto, a sintaxe é a mesma. Você usará esses três pontos, mas agora seguidos pelo nome do objeto cujo conteúdo deseja acessar. O resultado que você obterá será o conteúdo, mas sem as chaves ao redor.

// Create object literal
const myObj = {
  firstName: 'Sam',
  lastName: 'Dodge'
}

// Use spread operator to access content of "myObj" variable
// Note: the {} around ...myObj are to avoid TypeError
// console.log(...myObj) would not work
console.log({ ...myObj })
// Output:
// { firstName: 'Sam', lastName: 'Dodge' }

Duplicando iteráveis ​​com operador spread

O operador spread permite acessar rapidamente o conteúdo de um iterável. Isso pode ser útil quando você deseja copiar objetos iteráveis. Você pode não saber disso, mas copiar objetos pode ser complicado. Quando você tenta copiar algum primitivo , como um número ou uma string, você criará uma cópia real ou clone. Isso é chamado de cópia profunda .

Cópias profundas e superficiais

Isso não é verdade para objetos, incluindo iteráveis. Ao tentar copiar um objeto, como um array, você não criará uma cópia real. O que acontecerá em vez disso é que o JavaScript criará uma nova referência para esse objeto. Você pode pensar nisso como criar um novo apelido ou nome.

Ao copiar um objeto, você apenas cria um novo alias para ele. Como resultado, você tem dois nomes para aquela coisa, aquele objeto. No entanto, ainda há apenas um objeto, não dois. Isso também significa que se você fizer algo com o objeto usando o segundo alias (referência), essas alterações também terão efeito no primeiro alias.

Lembre-se de que ainda há apenas um objeto, mas duas referências (aliases) para acessá-lo. Este tipo de cópia é denominado cópia superficial e este tipo de cópia é denominado cópia por referência .

// Create an array
const myArray = ['Spread', 'Rest', 'JavaScript']

// Create shallow copy of "myArray" variable
const myShallowCopy = myArray

// Log the content of "myArray"
console.log(myArray)
// Output:
// [ 'Spread', 'Rest', 'JavaScript' ]

// Log the content of "myShallowCopy"
console.log(myShallowCopy)
// Output:
// [ 'Spread', 'Rest', 'JavaScript' ]

// Remove the last item from the original array ("myArray")
myArray.pop()

// Log the content of "myArray" again
// The last item is gone as it should
console.log(myArray)
// Output:
// [ 'Spread', 'Rest' ]

// Log the content of "myShallowCopy" again
// The change of "myArray" will also appear in "myShallowCopy"
// The last item is also gone
console.log(myShallowCopy)
// Output:
// [ 'Spread', 'Rest' ]

Cópias profundas com operador de propagação

É assim que a cópia em JavaScript funciona automaticamente. A boa notícia é que o operador de propagação permite que você supere esse problema com cópias superficiais. Ele permite que você crie rapidamente cópias profundas de iteráveis. Então, não se preocupe mais com mudanças acontecendo em lugares inesperados.

Criar uma cópia real e profunda de algum operador iterável com spread é simples. Primeiro, crie uma variável e atribua a ela algum array iterável. Este será o iterável que você copiará. Em segundo lugar, crie uma nova variável. Para atribuir a esta nova variável uma cópia da primeira, você usará o operador spread seguido do nome da primeira variável, envolto em colchetes.

O operador de propagação acessará o conteúdo e basicamente removerá os colchetes da matriz original. Portanto, para recriar a matriz, você envolverá o conteúdo em um novo par de colchetes. É isso aí. Você tem uma nova cópia profunda do primeiro iterável, neste caso, a matriz original.

Se você decidir alterar a matriz original ou a cópia, essa alteração terá efeito apenas para aquela matriz específica.

// Create the original array
const myArray = ['Spread', 'Rest', 'JavaScript']

// Use spread operator to create deep copy of "myArray""
const myDeepCopy = [...myArray]

// Log the content of "myArray"
console.log(myArray)
// Output:
// [ 'Spread', 'Rest', 'JavaScript' ]

// Log the content of "myDeepCopy"
console.log(myDeepCopy)
// Output:
// [ 'Spread', 'Rest', 'JavaScript' ]

// Remove the last item from the original array "myArray"
myArray.pop()

// Log the content of "myArray" again
// The last item is gone as it should
console.log(myArray)
// Output:
// [ 'Spread', 'Rest' ]

// Log the content of "myDeepCopy" again
// The "myDeepCopy" is not affected by change made to "myArray"
// The last item is still there as it should
console.log(myDeepCopy)
// Output:
// [ 'Spread', 'Rest', 'JavaScript' ]

Cópias profundas de literais de objeto com operador de propagação

Assim como você pode criar cópias profundas de arrays, você também pode criar cópias profundas de literais de objeto. A sintaxe é quase a mesma. Você deve usar esses três pontos seguidos do nome do literal do objeto que deseja copiar. Em seguida, você atribuirá isso a uma nova variável. Apenas certifique-se de colocar tudo isso entre colchetes, não quadrados.

// Create the original array
const myObj = {
  title: 'Guards! Guards!',
  author: 'Terry Pratchett',
}

// Use spread operator to create deep copy of "myObj""
const myDeepCopy = { ...myObj }

// Log the content of "myObj"
console.log(myObj)
// Output:
// { title: 'Guards! Guards!', author: 'Terry Pratchett' }

// Log the content of "myDeepCopy"
console.log(myDeepCopy)
// Output:
// { title: 'Guards! Guards!', author: 'Terry Pratchett' }

// Add new property the original object "myObj"
myObj.format = 'Hardcover'

// Log the content of "myObj" again
// New property is there
console.log(myObj)
// Output:
// {
//   title: 'Guards! Guards!',
//   author: 'Terry Pratchett',
//   format: 'Hardcover'
// }

// Log the content of "myDeepCopy" again
// The "myDeepCopy" still contains only two properties
console.log(myDeepCopy)
// Output:
// { title: 'Guards! Guards!', author: 'Terry Pratchett' }

Nota: Criar cópias profundas com o operador de propagação funcionará apenas para itens de primeiro nível. Não funcionará para objetos de anúncios de matrizes aninhadas. Para isso, você pode usar const myClone = JSON.parse(JSON.stringify(objToClone)).

Mesclando com operador de spread

Outra coisa que você pode fazer com o operador spread é mesclar dois ou mais iteráveis. Anteriormente, quando você queria mesclar dois ou mais arrays, por exemplo, você teria que usar algum método como concat(). O operador Spread permite que você faça isso com a mesma rapidez. Se não for mais rápido. Com sintaxe mais fácil.

O processo é semelhante a copiar o array existente. Você cria uma nova matriz. Em seguida, você usa o operador spread junto com os nomes da primeira matriz que deseja mesclar. Esta matriz será seguida por vírgula e outra propagação seguida pelo nome da segunda matriz. Finalmente, você também colocará isso dentro de um par de colchetes.

O resultado que você obterá serão todos os itens das matrizes que você deseja mesclar dentro de uma única matriz.

// Create first array
const arrayOne = [1, 2, 3]

// Create second array
const arrayTwo = ['four', 'five', 'six']

// Merge first and second array using spread operator
// Syntax: [...arrayOne, ...arrayTwo, ...arrayThree, etc.]
const arrayMerged = [...arrayOne, ...arrayTwo]

// Log the content of "arrayMerged"
console.log(arrayMerged)
// Output:
// [ 1, 2, 3, 'four', 'five', 'six' ]

Mesclando literais de objeto com operador de propagação

Mesclar literais de objeto com o operador de propagação funciona da mesma forma que com matrizes. A única diferença na sintaxe é que você precisa usar colchetes em vez de colchetes para envolver tudo. O resto é o mesmo e o resultado é um novo literal de objeto com conteúdo mesclado dos literais de objeto que você especificou.

// Create first object
const myObjOne = {
  title: 'The Color of Magic',
  author: 'Terry Pratchett',
}

// Create second object
const myObjTwo = {
  publicationDate: '2009',
  format: 'Paperback'
}

// Create third object
const myObjThree = {
  language: 'English',
  genre: 'Fantasy'
}

// Use spread operator to merge "myObjOne", "myObjTwo" and "myObjThree"
const myMergedObj = { ...myObjOne, ...myObjTwo, ...myObjThree }

// Log the content of "myMergedObj"
console.log(myMergedObj)
// Output:
// {
//   title: 'The Color of Magic',
//   author: 'Terry Pratchett',
//   publicationDate: '2009',
//   format: 'Paperback',
//   language: 'English',
//   genre: 'Fantasy'
// }

Inserindo dados com operador spread

Discutimos como usar o operador spread para acessar o conteúdo de arrays e literais de objeto. Também discutimos como usá-lo para duplicar esses iteráveis ​​e até mesmo mesclá-los. Isso não é tudo que você pode fazer. Você também pode usar o operador de propagação para dados. Você pode pegar o conteúdo de um iterável e inseri-lo dentro de outro iterável.

Por exemplo, digamos que você tenha dois arrays com algum conteúdo. O operador Spread permite inserir o conteúdo de um em qualquer lugar dentro do segundo. Você pode fazer isso também com literais de objeto, inserir conteúdo de um em qualquer lugar dentro do outro. Ou você pode inserir literal de objeto em uma matriz ou vice-versa.

// Example no.1: Arrays
// Create first array
const myArrayOne = ['C', 'C++', 'Java']

// Create second array with some content
// plus all the content from "myArrayOne"
const myArrayTwo = ['JavaScript', 'Python', 'PHP', ...myArrayOne, 'Assembly']

// Log the content of "myArrayTwo"
console.log(myArrayTwo)
// Output:
// [ 'JavaScript', 'Python', 'PHP', 'C', 'C++', 'Java', 'Assembly' ]


// Example no.2: Object literals
// Create first object literal
const myObjOne = {
  numOfPages: 706,
  publisher: 'O\'Reilly Media'
}

// Create second object literal with some content
// plus all the content from "myObjOne"
const myObjTwo = {
  title: 'JavaScript: The Definitive Guide',
  author: 'David Flanagan',
  ... myObjOne, // insert the content of "myObjOne"
  language: 'English'
}

// Log the content of "myObjTwo"
console.log(myObjTwo)
// Output:
// {
//   title: 'JavaScript: The Definitive Guide',
//   author: 'David Flanagan',
//   numOfPages: 706,
//   publisher: "O'Reilly Media",
//   language: 'English'
// }

Spread operador e argumentos de função

Quando você usa o operador de propagação para acessar o conteúdo de um iterável, ele retornará apenas o conteúdo. Ele removerá os colchetes circundantes no caso de uma matriz ou colchetes no caso de um objeto literal. Isso pode ser útil quando você deseja chamar uma função que recebe alguns argumentos.

Em vez de passar cada argumento um por um, você pode passar um array com todos os argumentos precedidos pelo operador spread. O resultado será o mesmo como se você passasse todos os argumentos um por um.

// Create an array with something
// that will be used as arguments
const myArgs = ['Jack', 'Joe', 'Tony']

// Create a simple function
// that will return all arguments one by one
function sayNames(name1, name2, name3) {
  return `Names you passed are ${name1}, ${name2} and ${name3}.`
}

// Call sayNames() function using spread operator
// to pass in content of "myArgs" as arguments
sayNames(...myArgs)
// Output:
// 'Names you passed are Jack, Joe and Tony.'

Você também pode usar o operador de propagação com funções matemáticas, que aceitam vários valores como argumentos, para passar esses valores.

// Create an array with numbers
const numbers = [15, 3, -5, 84, 653, Infinity]

// Get the highest number inside "numbers"
const highestNumber = Math.max(...numbers)

// Get the lowest number inside "numbers"
const lowestNumber = Math.min(...numbers)

// Log the value of "highestNumber"
console.log(highestNumber)
// Output:
// Infinity

// Log the value of "lowestNumber"
console.log(lowestNumber)
// Output:
// -5

Usando o operador spread com strings

No início deste tutorial, discutimos que o operador de propagação pode ser usado com objetos iteráveis. Bem, apenas com eles. Mencionei que um desses iteráveis ​​também são strings. Isso pode parecer estranho, mas é verdade. JavaScript permite que você use o operador spread também com strings.

Quando você usa propagação em uma string, o resultado será o mesmo que se você usasse o split()método. Em outras palavras, o operador de propagação converterá a string em uma matriz. Você obterá essa string na forma de caracteres individuais, ou seja, palavras, dígitos e espaços em branco.

// Create some text
const text = 'Sunny day.'

// Use spread to convert the string into an array
const processedText = [...text]

// Log the content
console.log(processedText)
// Output:
// [ 'S', 'u', 'n', 'n', 'y', ' ', 'd', 'a', 'y', '.' ]

Conclusão: o que é o operador de propagação de JavaScript, como funciona e como usá-lo

O operador de propagação de JavaScript é muito fácil de usar. Ele permite que você faça muitas coisas com apenas uma pequena quantidade de código. Espero que este tutorial tenha ajudado você a entender o que é operador de propagação de JavaScript, como funciona e como usá-lo.