Avatar ·

¿Qué significan los tres puntos en React? Explicación del operador spread (spread syntax)

¡Hola! Empecé a estudiar React y a menudo veo en ejemplos de código unos extraños tres puntos delante de objetos o arrays. Por ejemplo: ```javascript const newObject = { ...oldObject, newKey: 'value' }; ``` O en JSX: ```jsx const props = { name: 'John', age: 30 }; ``` Entiendo que esto tiene que ver con copiar datos, pero no lo comprendo del todo. Cuando intento hacer un código similar sin esos puntos, todo se rompe. Por ejemplo, quería combinar dos objetos: ```javascript const user = { name: 'Alice' }; const details = { age: 25, city: 'Moscow' }; const merged = user + details; // ¡Error! ``` O copiar un array: ```javascript const arr1 = [1, 2, 3]; const arr2 = arr1; // ¡Pero esto es una referencia, no una copia! arr2.push(4); console.log(arr1); // [1, 2, 3, 4] — no es lo que esperaba ``` Explícame, ¿qué son esos tres puntos? ¿Cómo funcionan en JavaScript y React? ¿Por qué son tan populares? ¿Y cómo copiar correctamente objetos y arrays sin mutar los datos originales?