Teoría: Spread y creación de nuevos arrays

Hasta ahora, hemos aprendido cómo podemos usar el operador rest (...) para recoger varios elementos en un solo array. Ahora vamos a conocer a su compañero: el operador spread. Aunque tienen la misma sintaxis (...), hacen cosas opuestas.

Expandir arrays con spread

Imagina que tenemos un array con ciudades de Francia y queremos crear un nuevo array que también contenga algunas ciudades de Italia. Podemos hacer esto usando el operador spread:

const frenchCities = ['paris', 'marseille'];
const cities = ['milan', 'rome', ...frenchCities];

console.log(cities);
// ['milan', 'rome', 'paris', 'marseille']

Lo que está pasando aquí

• ...frenchCities toma todos los elementos de frenchCities y los "expande" en el nuevo array.

• El array frenchCities original no se modifica.

• Básicamente, es como si hubiéramos escrito:

  const cities = ['milan', 'rome', 'paris', 'marseille'];

  Expand code

Alternativa sin spread

Sin el operador spread, podríamos hacer esto mismo con el método .concat():

const cities = ['milan', 'rome'].concat(frenchCities);

✅ Ambas opciones producen el mismo resultado, pero usar spread*es más limpio y más fácil de leer.

Ubicación flexible del spread

Algo genial de spread*es que no tiene que ir solo al final de un array. Podemos colocarlo en cualquier parte:

⏬ Al inicio

const cities = [...frenchCities, 'milan', 'rome'];
console.log(cities);
// ['paris', 'marseille', 'milan', 'rome']

Aquí, primero expandimos frenchCities, y luego agregamos 'milan' y 'rome'.

⏬ En medio

También podemos usar spread para insertar elementos en el medio de un array:

const cities = ['milan', ...frenchCities, 'rome'];
console.log(cities);
// ['milan', 'paris', 'marseille', 'rome']

Sin spread, no hay una forma sencilla de hacer esto en una sola línea.

Combinar múltiples arrays

No solo podemos expandir un solo array, sino que también podemos combinar varios arrays fácilmente:

const frenchCities = ['paris', 'marseille'];
const italianCities = ['rome', 'milan'];
const cities = [...frenchCities, ...italianCities];

console.log(cities);
// ['paris', 'marseille', 'rome', 'milan']

Alternativa sin `spread:

const cities = frenchCities.concat(italianCities);

✅ De nuevo, spread nos permite escribirlo de forma más compacta y legible.

Copiar un array con spread

Una de las formas más comunes de usar spread es copiar un array. Esto es útil cuando queremos modificar la copia sin afectar el original.

const frenchCities = ['paris', 'marseille'];
const copy = [...frenchCities];

copy.push('lyon');

console.log(copy);         // ['paris', 'marseille', 'lyon']
console.log(frenchCities); // ['paris', 'marseille']

¿Por qué copiar un array así?

Si hubiéramos hecho esto en su lugar:

const copy = frenchCities;

Ambas variables habrían apuntado al mismo array en memoria, y modificar copy también cambiaría frenchCities.

Alternativa sin spread:

const copy = frenchCities.slice();

✅ El operador spread nos permite hacer esto de manera más limpia.

Ahora que lo conoces, ¡pruébalo en tu código y verás lo útil que es!