¿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?