Quando estava iniciando meus estudos sempre me preocupava em entender como trabalhar com os métodos ou operadores no JavaScript. Mas um dia me deparei com Spread e Rest. Não fazia a mínima ideia do que faziam e como manipular os elementos de um array usando eles. Mas depois de estudar e praticar consegui entender. Então vamos lá conhecer melhor esses dois!
Spread
Este operador tem como objetivo espalhar ou propagar os elementos de um array como parâmetros para uma função. A sintaxe do operador spread é ..., isso mesmo são 3 pontos e depois deles temos o nome do nosso array. O que iremos fazer agora é exibir apenas o maior número de dentro de um array, utilizando do objeto do JavaScript Math, que tem a função max, ela irá trazer o maior número de dentro do array. Então para que tudo fique claro vamos para o código, primeiro vamos ver o que acontece se não usarmos o spread :
const nums = [1, 2, 3, 54, 65, 66]
console.log(Math.max(nums));
Se você executar o código acima o resultado será NaN:
Mas o que significa isso? NaN significa Not a Number, ou seja a nossa função max() está esperando receber números e não um array. Então se quiser que ele retorne o maior número, teríamos que passar dessa maneira:
const nums = [1, 2, 3, 54, 65, 66]
console.log(Math.max( 1, 2, 3, 54, 65, 66 ));
O resultado seria que o número 66 é o número de valor máximo:
Mas fazer isso é inviável, por isso temos a nossa disposição o operador spread, que fará isso para nós. Então para espalharmos esse array como parâmetros para essa função, para que ela me traga o número de valor máximo, passamos dentro do Math.max da seguinte maneira:
const nums = [1, 2, 3, 54, 65, 66]
console.log(Math.max(...nums));
O operador spread está agora espalhando todos os números (elementos do array) dentro da função max(), agora não estamos passando um array, mas sim números fora de um array como parâmetros. O resultado é do output é esse:
Então reforçando novamente. O operador spread pega cada elemento do array e espalha como parâmetros para a função que desejamos.
Mas e se ocorrer de termos dois arrays de string e precisamos adicionar dentro do segundo array todos os elementos que existem no primeiro? Isso é possível utilizando o spread, vamos para mais um exemplo:
const novasEmpresas = ['Google', 'Facebook', 'Twitter', 'kaspersky', 'Tesla']
const empresas = ['Apple', 'IBM', 'Oracle', ...novasEmpresas]
console.log(empresas);
Note que eu estou passando o operador que será responsável em espalhar dentro do array empresas os elementos que existem dentro de novasEmpresas. Então o resultado é que depois de Oracle, todos os elementos pertencentes ao array empresas vão estar dentro do array novasEmpresas:
O array está organizado corretamente apenas o formato dele foi exibido diferente na imagem. O correto é ler da esquerda para a direita, mas ele está assim:
['Apple', 'IBM', 'Oracle', 'Google', 'Facebook', 'Twitter', 'kaspersky', 'Tesla']
Você tem a liberdade de passar na posição que desejar no array o operador spread. Então se quiser passar na primeira posição do array, ou no meio dele, isso vai depender da necessidade de cada situação:
Spread com objetos
O mesmo se aplica para um array onde temos vários objetos, podemos espalhar o que nossa variável vai receber:
const novoDev = [{
nome: 'Rafael',
cargo: 'Programador',
idade: 23,
tecnologias: {
front: 'Angular',
front2: 'React',
back: 'NodeJS'
}
}]
const devs = [...novoDev, {
nome: 'Fulano',
cargo: 'Desenvolvedor Sênior',
idade: 23,
tecnologias: {
front: 'Angular',
front2: 'VUE',
back: '.NET'
}
}]
console.log(devs);
O resultado será que em devs teremos um novo objeto:
Outro exemplo é que podemos adicionar dessa maneira no objeto:
const novoDev = [{
nome: 'Rafael',
cargo: 'Programador',
idade: 23,
tecnologias: {
front: 'Angular',
front2: 'React',
back: 'NodeJS'
}
}]
const adicionar = { ...novoDev, updateDate: new Date() }
console.log(adicionar);
O resultado é um novo atributo em nosso objeto:
Rest
O objetivo do rest é o oposto. Ele agrupa todos os parâmetros que são passados para uma função e devolve tudo dentro de um array. A sintaxe dele é a mesma usada para o spread, mas quando vamos agrupar sempre fazemos isso passando os parâmetros para a função fora de um array. Para entender melhor vamos ao código:
const rest = (...arg) => arg
const numbers = rest(1, 2, 3, 4, 5)
console.log(numbers);
O que estamos fazendo acima é uma função em forma de arrow function, onde temos como parâmetro a palavra arg, abreviação para argumentos, onde será retornado todos os argumentos. Na const numbers temos os parâmetros sendo passados para a função rest. Se executarmos os código acima verá que o valor de numbers é agora um array de números, porque primeiro determinei como parâmetro para a função, o operador rest (...arg), dizendo que tudo o que essa função receber como argumento deve ser incluso dentro de um array:
Então reforçando mais uma vez. Para utilizar o rest precisamos primeiro realizar o agrupamento dele na função. Quando ele receber seu parâmetros, ele vai entender que queremos agrupar esses parâmetros dentro de um array.
Rest com Objetos
A lógica não muda. Vamos ver no código o exemplo:
const novoDev = {
nome: 'Rafael',
cargo: 'Programador',
idade: 23,
tecnologias: {
front: 'Angular',
front2: 'React',
back: 'NodeJS'
}
}
const rest = (...arg) => arg
const resultado = rest(novoDev)
console.log(resultado);
Como podem ver estou passando esse objeto que está fora de um array como parâmetro para a função rest(), o resultado devolvido é um array com o objeto dentro dele, pois estou determinando na função rest() que agrupe tudo dentro de um array:
Conclusão
Se o que foi abordado neste artigo não ficou claro, procure pesquisar e entender mais lendo outros artigos, além de praticar!
Nos próximos vamos aplicar conceitos mais profundos e situações que podemos nos deparar em nosso cotidiano na empresa.
Agradeço por ler até o final, caso tenha alguma dúvida ou sugestão entre em contato comigo pelo LinkedIn ou deixe um comentário. Muito obrigado e até o próximo post! 🚀