0

Tengo la siguiente duda, para usar spread operator en objetos usola siguiente sintaxis o codigo:

const producto = {
    nombre: "Monit de 20 Pulgadas",
    precio: 300,
    disponible: true
}
 
const medidas = {
    peso: '1kg',
    medida: '1m'
}
 
const resultado2 = { ...producto, ...medidas};

Hasta ahí entendi perfecto, con el Array carrito[] asigne éste array el objeto, pero de diferente forma:

const carrito = [];
 
// Definir un prodcuto
const producto = {
    nombre: "Monitor de 32 pulgadas",
    precio: 300
}
 
const producto2 = {
    nombre: "Celular",
    precio: 800
}
 
const producto3 = {
    nombre: "Teclado",
    precio: 50
}
 
let resultado;
 
resultado = [...carrito, producto];

Mi duda es la siguiente es con el uso del . . .

El spread se usa con objetos iterables, por que no se usa en el objeto producto en éste caso? Osea de ésta forma:

resultado = [...carrito, ...producto];

En éste caso, me sale el error de producto is not iterable. Pero no entiendo por qué, si en el primer caso si se puede.

4
  • Puedes desestructurar varios objetos, en un solo objeto como hiciste al principio { ...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.
    – Jaime
    Commented el 2 jul. 2022 a las 21:50
  • 2
    ¿Cómo vas a desestructurar producto que es un objeto literal dentro de un array?
    – Jaime
    Commented el 2 jul. 2022 a las 21:57
  • Tiene razon Jaime Menendez, si quieres añadir un objeto a un array con spread operator deberías hacer: resultado = [...carrito, {...producto}]. Así añadirías un objeto desestructurado de otro objeto en un array
    – Suso
    Commented el 2 jul. 2022 a las 21:59
  • @JaimeMenéndez Ok, esa era la duda. Gracias.
    – gisela
    Commented el 3 jul. 2022 a las 2:24

1 respuesta 1

1

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.