Veamos desde un principio, la definición del Spred Operator es la siguiente
La sintaxis extendida o spread syntax permite a un elemento iterable tal como un arreglo o cadena ser expandido en lugares donde cero o más argumentos (para llamadas de función) o elementos (para Array literales) son esperados, o a un objeto ser expandido en lugares donde cero o más pares de valores clave (para literales Tipo Objeto) son esperados.
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Spread_syntax
Por lo que entendemos que, el Spred Operator es una forma de extender variables dentro de un array u objeto
Algunos ejemplos están acá:
[...iterableObj, '4', 'five', 6];
let objClone = { ...obj };
Ahora, entendiendo que el spread operator lo que hace es crear una copia de un array u objeto iterables ambos, en ambos casos siguientes, el resultado no es el mismo
const a = [1,2,3];
const b = [...a];
const c = a;
console.log(a === b); // false
console.log(c === a); // true
Esto sucede debido a que JavaScript guarda los valores de una variable dentro de un espacio único en el hilo del CPU donde corre, esto para poder identificar las variables; cuando comparamos dos objetos que a simple vista tienen los mismos valores, la comparación lógica dará false
, debido a que, si bien, estos dos parecen ser los mismos, su identificador en memoria no lo es, por lo que para la computadora, no lo son.
console.log({} === {}); // false
Entonces, habiendo entendido esto, hablemos de tu duda en si.
Sabiendo que el Spred Operator clona un objeto o array, en el primer caso sí funciona debido a que estás clonando un objeto dentro de otro, por lo que estás superponiendo sus propiedades y valores, es decir al hacer algo así obtienes lo siguiente
const obj = {a:"b"};
console.log({...obj, c:"d"})
Como puedes ver, las propiedades y valores se han superpuesto al segundo objeto, esto porque usamos el Spred Operator, también podemos usar esto en un array de forma similar así
const a = [1, 2, 3];
console.log([...a, 4, 5]);
Aquí los valores del otro array se adhieren al último porque estamos haciendo esto con el spred operator.
Visto esto, lo que debes entender también es el funcionamiento de un Array; el cual es una colección de elementos con índices de forma ordenada, los cuales solamente almacenan VALORES, a diferencia de los objetos, no pueden almacenar un prototipo de clave:valor, por lo que NO puedes adherir propiedades (claves) a un array como podrías hacerlo con un objeto.
Debido a esto te aparece este error, porque solamente puedes adherir variables del mismo tipo con el spread operator; es decir tampoco puedes adherir un array a un objeto y/o viceversa.
{ ...producto, ...medidas};
o puedes desestructurar varios arrays en un solo array, pero lo que NO puedes hacer es desestructurar un objeto en un array ni un array en un objeto. ¿Que se supone que salga como resultado? ¿Un objeto? ¿Un array? ¿Qué esperas de[...carrito, ...producto];
siendo carrito y producto objetos? Para mí eso no tiene sentido.resultado = [...carrito, {...producto}]
. Así añadirías un objeto desestructurado de otro objeto en un array