Olá! Tudo bem? Esse operador de espalhamento ou spread pode ser usado tanto em arrays quanto em objetos JavaScript, o uso desse operador é especialmente quando precisamos adicionar um novo elemento em um array ou uma nova propriedade em um objeto, veja alguns exemplos:
const lista = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const novaLista = [0, ...lista, 10];
console.log(novaLista); // Saída: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Neste exemplo, conseguimos adicionar elementos no começo e no fim com o operador spread. Se tirarmos o ... o resultado seria bem diferente:
const lista = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const novaLista = [0, lista, 10];
console.log(novaLista); // Saída: [0, [1, 2, 3, 4, 5, 6, 7, 8, 9], 10]
Nesse caso teríamos uma lista com outra lista dentro. Veja também um exemplo com objetos:
const dadosPessoais = {
nome: "João",
anoNascimento: 1990
}
const anoAtual = Number(Date().split(" ")[3]);
const dadosPessoaisAtualizados = {...dadosPessoais, idade: anoAtual - dadosPessoais.anoNascimento};
console.log(dadosPessoaisAtualizados); // Saída: { nome: 'João', anoNascimento: 1990, idade: 33 }
Se fossemos fazer essa mesma operação, mas sem usar o spread, teríamos que atribuir o valor de cada propriedade manualmente:
const dadosPessoais = {
nome: "João",
anoNascimento: 1990
}
const anoAtual = Number(Date().split(" ")[3]);
const dadosPessoaisAtualizados = {
nome: dadosPessoais.nome,
anoNascimento: dadosPessoais.anoNascimento,
idade: anoAtual - dadosPessoais.anoNascimento
};
console.log(dadosPessoaisAtualizados); // Saída: { nome: 'João', anoNascimento: 1990, idade: 33 }
Nesse caso, até que não há tanta diferença porque não temos muitas propriedades no objeto, mas se tivermos 20 atributos, por exemplo aí teremos um problema.
Resumindo, nesse caso o operador spread foi usado para criar um novo objeto usando os dados de um outro de forma simples, o que tem tudo a ver com a função do método map, que é iterar sobre cada elemento de um array e retornar um elemento atualizado, assim criando um novo array. Espero ter ajudado!