[Dúvida] Spread operator em funções

Olá, Sara! Tudo certo?

Quando você tenta unir objetos que têm propriedades com os mesmos nomes, o JavaScript sobrescreve os valores dessas propriedades, mantendo apenas o valor do último objeto que foi "espalhado".

Por exemplo, se você tem três objetos:

const mago = {
 nome: "Gandalf",
 classe: "mago"
}

const guerreiro = {
 nome: "Aragorn",
 classe: "guerreiro"
}

const ranger = {
 nome: "Legolas",
 classe: "ranger"
}

E tenta combiná-los usando o operador de espalhamento:

const personagens = { ...mago, ...guerreiro, ...ranger }
console.log(personagens)

O resultado será:

{ nome: 'Legolas', classe: 'ranger' }

Isso acontece porque o JavaScript sobrescreve as propriedades nome e classe cada vez que encontra uma nova ocorrência com o mesmo nome de chave.

Se você quiser preservar todas as informações, uma estratégia é usar arrays para armazenar objetos individuais ou criar chaves únicas para cada conjunto de propriedades. Por exemplo:

const personagens = [
  { ...mago },
  { ...guerreiro },
  { ...ranger }
]
console.log(personagens)

Ou, se preferir manter em um único objeto, pode usar chaves únicas:

const personagens = {
  mago: { ...mago },
  guerreiro: { ...guerreiro },
  ranger: { ...ranger }
}
console.log(personagens)

Espero ter ajudado e bons estudos!