Spread/Rest: la función de los tres puntos

Al finalizar este tema

Comprenderá que ... tiene dos funciones: "expandir" (Spread) y "recolectar" (Rest).

El mismo símbolo, diferentes funciones

En JavaScript, ... cambia de función según su posición:

• Spread: "Expande" un array u objeto.
• Rest: "Recolecta" los valores restantes.

Es el mismo ..., pero realiza acciones opuestas según dónde se utilice.

Spread: Expandir

Expande un array:

const a = [1, 2, 3];
const b = [0, ...a, 4];
// [0, 1, 2, 3, 4]

...a extrae y enumera los elementos del arreglo a uno por uno. También se utiliza para copiar un arreglo:

const original = [1, 2, 3];
const copy = [...original];

Los objetos también se expanden:

const defaults = { theme: "light", lang: "ko" };
const userSettings = { lang: "en", fontSize: 14 };
const config = { ...defaults, ...userSettings };
// { theme: "light", lang: "en", fontSize: 14 }

El objeto siguiente sobrescribe las claves existentes. Este es el patrón para combinar la configuración predeterminada con la configuración personalizada.

También se utiliza al pasar un array como argumento de una función:

const nums = [3, 1, 4, 1, 5];
Math.max(...nums); // 5

Rest: Recopilar

Permite recibir “el resto de los parámetros” como un arreglo en la función:

function sum(first, ...rest) {
  console.log(first); // 1
  console.log(rest);  // [2, 3, 4, 5]
  return rest.reduce((a, b) => a + b, first);
}
sum(1, 2, 3, 4, 5); // 15

...rest recopila todos los elementos restantes después del primer argumento en una lista.

También se utiliza en la desestructuración:

const [head, ...tail] = [1, 2, 3, 4];
// head: 1, tail: [2, 3, 4]

const { name, ...others } = { name: "Alice", age: 25, city: "Seoul" };
// name: "Alice", others: { age: 25, city: "Seoul" }

Es útil cuando se desea agrupar todos los elementos excepto una propiedad específica.

Cómo diferenciar entre Spread y Rest

// Spread — "desde el lado que inserta" se despliega
const arr = [...other];
func(...args);

// Rest — "desde el lado que recibe" se recopila
function func(...params) {}
const [a, ...rest] = arr;

En el lugar donde se pasa un valor (lado derecho de la asignación, llamada a función), se usa Spread. En el lugar donde se recibe un valor (lado izquierdo de la asignación, declaración de función), se usa Rest.

Patrón práctico: actualización inmutable

Al actualizar el estado en React, no debes modificar el objeto original. Crea un nuevo objeto con Spread:

const [user, setUser] = useState({ name: "Alice", age: 25 });

setUser({ ...user, age: 26 });

Al agregar elementos a una matriz:

const [items, setItems] = useState(["a", "b"]);

setItems([...items, "c"]); // agregar al final
setItems(["z", ...items]); // agregar al inicio

El array u objeto original no se modifica; se crea uno nuevo.

Conceptos clave

... funciona como operador de expansión en el lado del emisor y como operador de recopilación en el lado del receptor. Con el operador de expansión se pueden copiar y combinar arrays u objetos, mientras que con el operador de recopilación se pueden agrupar los valores restantes. Es el patrón más utilizado en las actualizaciones de estado inmutable de React.