El Operador Spread (...) en Arreglos

javascript

4 Minutos

16 may 2025

✨ Expandiendo Elementos

El operador Spread (o sintaxis Spread), representado por tres puntos (...), nos permite expandir los elementos de un objeto iterable (como un arreglo o un string) en lugares donde se esperan cero o más argumentos (para llamadas a funciones) o elementos (para literales de arreglo).

Imagina que tienes una caja de herramientas (un arreglo) y quieres sacar todas las herramientas y ponerlas sobre la mesa (otro lugar que espera elementos).

let herramientas = ["Martillo", "Destornillador", "Sierra"];

// Sin Spread:
let mesa = [herramientas, "Clavos"]; // Pone la CAJA en la mesa
console.log(mesa); // Muestra [["Martillo", "Destornillador", "Sierra"], "Clavos"]

// Con Spread:
let mesaConSpread = [...herramientas, "Clavos"]; // Saca las HERRAMIENTAS y las pone
console.log(mesaConSpread); // Muestra ["Martillo", "Destornillador", "Sierra", "Clavos"]

🛠️ Usos Comunes con Arreglos

1. Copiar Arreglos (Copia Superficial)

Como vimos en el artículo sobre copias, Spread es una forma excelente y concisa de crear copias superficiales:

let original = [10, 20, 30];
let copia = [...original];

copia.push(40);
console.log(original); // Muestra [10, 20, 30]
console.log(copia); // Muestra [10, 20, 30, 40]

2. Concatenar Arreglos

Podemos combinar fácilmente dos o más arreglos en uno nuevo:

let frutas = ["Manzana", "Banana"];
let verduras = ["Zanahoria", "Lechuga"];
let otros = ["Pan"];

let listaCompra = [...frutas, ...verduras, "Leche", ...otros];
console.log(listaCompra);
// Muestra ["Manzana", "Banana", "Zanahoria", "Lechuga", "Leche", "Pan"]

Es una alternativa más moderna y legible que el método concat().

3. Expandir en Argumentos de Función

Si una función espera múltiples argumentos individuales, podemos usar Spread para pasarle los elementos de un arreglo como esos argumentos.

let numeros = [5, 15, 3];

// Math.max espera argumentos individuales: Math.max(arg1, arg2, arg3)
let maximo = Math.max(...numeros); // Equivalente a Math.max(5, 15, 3)

console.log(maximo); // Muestra 15

function sumarTres(a, b, c) {
  return a + b + c;
}

let valores = [10, 20, 5];
let suma = sumarTres(...valores); // Equivalente a sumarTres(10, 20, 5)
console.log(suma); // Muestra 35

INFO

💡 Esto reemplaza en gran medida la necesidad del antiguo método Function.prototype.apply().

4. Convertir Iterables en Arreglos

Podemos usar Spread dentro de un literal de arreglo [] para convertir otros iterables (como strings o NodeList del DOM) en verdaderos arreglos.

let mensaje = "Hola";
let letrasArray = [...mensaje];
console.log(letrasArray); // Muestra ["H", "o", "l", "a"]

// Suponiendo que tenemos una NodeList del DOM
// let nodos = document.querySelectorAll('p');
// let nodosArray = [...nodos]; // Convierte la NodeList en un Array

🤔 Spread vs. Rest

Es fácil confundir el operador Spread (...) con el parámetro Rest (...) que vimos en la desestructuración y en los parámetros de función.

Spread (...iterable): Expande un iterable en sus elementos individuales. Se usa en literales de arreglo [...arr] o llamadas a función func(...arr).
Rest (...variable): Agrupa elementos restantes en un solo arreglo. Se usa en desestructuración de arreglos [a, ...resto] o en la definición de parámetros de función function miFunc(...args).

// Spread
let nums1 = [1, 2];
let nums2 = [3, 4];
let combinado = [...nums1, ...nums2]; // Expande nums1 y nums2

// Rest
function sumar(...argumentos) {
  // Agrupa todos los argumentos en el arreglo 'argumentos'
  return argumentos.reduce((acc, val) => acc + val, 0);
}
let [primero, ...resto] = combinado; // Agrupa 2, 3, 4 en el arreglo 'resto'

☝️🤓

🏋️‍♂️ Ejercicio

Crea dos arreglos: inicio = [1, 2] y fin = [5, 6].
Usando el operador Spread, crea un tercer arreglo completo que contenga los elementos de inicio, luego los números 3 y 4, y finalmente los elementos de fin.
Muestra completo por consola.

🏋️‍♂️ Ejercicio

Dado el arreglo: let palabra = ["H", "o", "l", "a"];

Define una función mostrarLetras que acepte cuatro argumentos (l1, l2, l3, l4) y los muestre por consola separados por guiones (ej. “H-o-l-a”).
Llama a la función mostrarLetras pasándole los elementos del arreglo palabra como argumentos individuales usando el operador Spread.

🚀 Extra

Investiga sobre:

¿Se puede usar el operador Spread con objetos literales {...obj}? ¿Para qué sirve?
¿Qué otros tipos de objetos son iterables en JavaScript además de los arreglos y strings?
Compara [...iterable] con Array.from(iterable). ¿Existen diferencias sutiles en su comportamiento o casos de uso?