Spread syntax — copiar, combinar y sobrescribir ajustes

Combina una lista de productos en stock con una de productos pendientes en una sola. Aplica solo los campos que un usuario cambió sobre una configuración por defecto. En casos como estos, construyes un array u objeto nuevo con el contenido desplegado, dejando los datos originales exactamente como estaban.

Este artículo cubre spread syntax para eso, y qué valor gana cuando la misma clave aparece dos veces.

Desplegar contenido en su lugar — spread syntax

¿Quieres combinar una lista de productos en stock con una de pendientes en una sola? Añádelos uno a uno con push, y el array original se reescribe. Este es un caso donde quieres construir un array nuevo con el contenido desplegado, dejando las listas originales exactamente como estaban.

Spread syntax (escribir ... antes de un valor para desplegar el contenido de un array u objeto en su lugar) te deja escribir const allItems = [...inStock, ...backOrder]; para construir un array combinado nuevo. Escribe solo uno, como en [...inStock], y eso es una copia — un array separado con el mismo contenido.

Los objetos funcionan igual, con { ...product }. Ten en cuenta que esto es una copia solo del primer nivel — el comportamiento cuando hay un objeto o array anidado dentro se cubre en el artículo de referencias y copias.

... cumple un papel distinto según dónde lo escribas. En el lado izquierdo de =, es rest, agrupando lo que sobra. Dentro de [] o {} en el lado derecho, es spread, desplegando contenido. Es el mismo símbolo, pero agrupar y desplegar van en direcciones opuestas.

const inStock = ["Wireless Mouse", "USB-C Hub"];
const backOrder = ["Monitor Arm"];

// Construye un array nuevo desplegando ambos
const allItems = [...inStock, ...backOrder];
console.log(allItems.join(", "));   // Wireless Mouse, USB-C Hub, Monitor Arm

// El array original queda intacto
console.log(inStock.length);        // 2

// Puedes mezclar valores individuales a mitad de camino
const featured = ["This Week's Pick", ...inStock];
console.log(featured.length);       // 3

// Los objetos se pueden copiar de la misma forma
const product = { name: "USB-C Hub", price: 2480 };
const copied = { ...product };
console.log(copied.price);          // 2480

Construye un array para mostrar a partir de 2 arrays — en stock y pendiente. inStock y backOrder ya están declarados.

① Construye un array nuevo combinando ambos, y muéstralo unido con ", ".

② Muestra el conteo del array combinado.

③ Construye un array que añada "New Arrival" al principio del array combinado, y muestra los primeros 2 elementos unidos con ", ".

④ Construye un array nuevo copiando el array en stock, y muestra su conteo.

(Si se ejecuta correctamente, aparecerá una explicación.)

Reescribe un array u objeto copiado y observa qué le pasa al original. inStock y product ya están declarados.

① Construye una copia de inStock, añádele "HDMI Cable", y muestra su conteo.

② Muestra el conteo del inStock original.

③ Construye una copia de product, cambia su precio a 1980, y muéstralo.

④ Muestra el precio del product original.

Combinar ajustes — el posterior gana

A veces los ajustes de una app se configuran con una ronda completa de valores por defecto, y luego solo se sobrescriben los campos que el usuario cambió. Comprobar y asignar cada campo cambiado uno a uno, sin embargo, requeriría añadir código cada vez que aparece un ajuste nuevo.

Alinea dos spreads de objeto, como en { ...defaultSettings, ...userSettings }, y una clave compartida se sobrescribe con el valor que se escribió después. Una clave que el usuario no ha especificado se queda en su valor por defecto.

El orden en que los escribes se convierte directamente en la prioridad, así que pon los valores por defecto primero y lo que quieras priorizar después.

const defaultSettings = { theme: "light", itemsPerPage: 20, notifications: true };
const userSettings = { theme: "dark" };

const merged = { ...defaultSettings, ...userSettings };
console.log(merged.theme);           // dark (gana el que se escribió después)
console.log(merged.itemsPerPage);    // 20 (falta en el lado del usuario, así que se queda el default)

// Invierte el orden, y gana el default en su lugar
const reversed = { ...userSettings, ...defaultSettings };
console.log(reversed.theme);         // light

// Incluso un valor undefined sobrescribe, mientras la clave exista en el lado posterior
const partial = { theme: undefined };
const broken = { ...defaultSettings, ...partial };
console.log(broken.theme);           // undefined

Hasta undefined sobrescribe

Mientras la clave exista en el lado que estás combinando encima, sobrescribe — incluso si el valor es undefined. Combina un campo sin rellenar directamente de un formulario así, y el valor por defecto desaparece, reemplazado por undefined. Para un campo que solo quieres usar cuando realmente tiene un valor, compruébalo uno a uno, como en userSettings.theme ?? defaultSettings.theme.

Aplica los cambios de un usuario sobre una configuración por defecto para construir los ajustes que realmente usarás. defaultSettings y userSettings ya están declarados.

① Construye un objeto que combine los ajustes del usuario sobre los de defecto, y muéstralo tal cual.

② Muestra el theme del resultado combinado.

③ Construye un objeto con el orden de combinación invertido, y muestra su theme.

④ Muestra qué le pasa al ajuste notifications, que el lado del usuario no tiene, en el resultado combinado.