Avatar ·

O que significam três pontos em React? Explique o operador spread (spread syntax)

Olá! Comecei a estudar React e frequentemente vejo nos exemplos de código três pontos estranhos antes de objetos ou arrays. Por exemplo: ```javascript const newObject = { ...oldObject, newKey: 'value' }; ``` Ou em JSX: ```jsx const props = { name: 'John', age: 30 }; ``` Eu entendo que isso tem a ver com copiar dados, mas não entendo completamente. Quando tento fazer um código parecido sem esses pontos, tudo quebra. Por exemplo, queria mesclar dois objetos: ```javascript const user = { name: 'Alice' }; const details = { age: 25, city: 'Moscow' }; const merged = user + details; // Erro! ``` Ou copiar um array: ```javascript const arr1 = [1, 2, 3]; const arr2 = arr1; // Mas isso é uma referência, não uma cópia! arr2.push(4); console.log(arr1); // [1, 2, 3, 4] — não é o que eu esperava ``` Explique, o que são esses três pontos? Como eles funcionam em JavaScript e React? Por que são tão populares? E como copiar objetos e arrays corretamente sem mutar o original?