No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Mutable functions

26/28
Recursos

Las funciones mutables consisten en cambiar el array original. Estos m茅todos son:

  • push
  • unshift
  • pop
  • shift
  • splice
  • sort

M茅todo push

El m茅todo push agrega uno o varios elementos al final del array original. El m茅todo recibe como argumento los valores a agregar. Retorna el n煤mero de elementos del array mutado.

const array = [1,2,3]
array.push(4,5)
console.log(array) // [ 1, 2, 3, 4, 5 ]

M茅todo unshift

El m茅todo unshift agrega uno o varios elementos al inicio del array original. El m茅todo recibe como argumento los valores a agregar. Retorna el n煤mero de elementos del array mutado.

const array = [3,4,5]
array.unshift(1,2)
console.log(array) // [ 1, 2, 3, 4, 5 ]

M茅todo pop

El m茅todo pop extrae el elemento del final del array original. El m茅todo no recibe ning煤n argumento. Retorna el elemento extra铆do, si no se guarda en una variable, el Garbage Collection{target="_blank"} lo elimina.

const array = [1,2,3,4]
const lastElement = array.pop()
console.log(lastElement) // 4
console.log(array) // [ 1, 2, 3 ]

M茅todo shift

El m茅todo shift extrae el elemento del inicio del array original. El m茅todo no recibe ning煤n argumento. Retorna el elemento extra铆do, si no se guarda en una variable, el Garbage Collection{target="_blank"} lo elimina.

const array = [1,2,3,4]
const firstElement = array.shift()
console.log(firstElement) // 1
console.log(array) // [ 2, 3, 4 ]

M茅todo splice

El m茅todo splice extrae uno o varios elementos del array original a partir del 铆ndice y los reemplaza con otro elemento especificado como argumento. Retorna un array con los elementos extra铆dos, si no se guarda en una variable, el Garbage Collection{target="_blank"} lo elimina.

El m茅todo splice recibe tres argumentos:

  • El 铆ndice donde comenzar谩 a cambiar el array.
  • La cantidad de elementos que ser谩n reemplazados.
  • Uno o varios elementos que reemplazar谩n a los originales del array.
array.splice(铆ndice, cantidad, items)
array.splice(铆ndice, cantidad, item1, item2, ..., itemN)

Ejemplos utilizando el m茅todo splice

const array = [1,2,3,4]
const elements = array.splice(2,1,"tres")
console.log(elements) // [3]
console.log(array) // [ 1, 2, 'tres', 4 ]

const array = [1,2,3,4]
const elements = array.splice(1,2,"dos", "tres")
console.log(elements) // [ 2, 3 ]
console.log(array) // [ 1, 'dos', 'tres', 4 ]

Contribuci贸n creada por: Andr茅s Guano.

Aportes 109

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Les dejo el c贸digo como est谩 al principio de la clase para los que no quieran escribir鈥

const products = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];

const myProducts = [];

console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));

Reto 1

Eliminar un elemento sin borrarlo del la lista original.
Soluci贸n: usar filter:

Reto 2

Modificar una nueva lista sin modificar la original.
Soluci贸n: copiar solo los elementos para que no tengan la misma direcci贸n de memoria.

Un peque帽o aporte que no sab铆a y quiero compartir.
El metodo .splice(), no solamente sirve para borrar en cierta
forma un elemento sino tambi茅n para agregarlos al index del array que tu quieres.Ej:

Tenemos el siguiente array:
const holaMundo = [鈥楳aria鈥, 鈥楢ndres鈥, 鈥楥ecilia鈥橾;

Y quiz谩s lo que quieres es a帽adir a 鈥楻oberto鈥 despu茅s de Andres y antes de cecilia.

  1. Buscamos el index con el findIndex de cecilia tal como el profe nos ense帽o.
  2. holaMundo.splice(index, 0, 鈥楻oberto鈥)

& listo, pones tu index de celcilia, no le ponemos un 1
porque no queremos eliminar ning煤n elemento hacia la
derecha sino un 0, pones la coma y pones el o los
elementos que quieres agregar all铆.

Para el segundo reto, solo se utiliza .map con una nueva variable, de esta forma:

const newArray2 = productsV2.map(item => {
    if(item.id === update.id){
        return {
            ...item,
            ...update.changes
        }
    }else{
        return {
            ...item
        }
    }
});

Bueno, una de las cosas m谩s reelevantes que saqu茅 del curso es la importancia del spread operator en situaciones clave, y es algo que personalmente no termin茅 de asimilar como me gustar铆a, por lo que busqu茅 algo de documentaci贸n que me puede servir, y tambi茅n a ustedes

VIDEO - entendiendo spread operator

Sintaxis Spread - MDN

How to use spread operator - Medium

Spread Operator - Medium (espa帽ol)

Practical usages of spread operator

El reto se soluciona simpletemente creando otro array
const otroArray=[鈥roducts]
y aplicar todo el codigo sobre el array nuevo .
Eso es todo

Reto 1:

const products = [
    {title: "Pizza", price: 121, id: "馃崟"},  
    { name: "Burger", price: 121, id: '馃崝' },
    { name: "Hot cakes", price: 121, id: '馃' },
];

const myProducts = [];
let newArray;
const productIndex = products.findIndex(item => item.id === "馃崝");
if (productIndex !== -1) {
    myProducts.push(products[productIndex]); 
    newArray = products.filter(item => item != products[productIndex]);
}
console.log("Products:",products);
console.log("MyProducts:", myProducts);
console.log("newArray:",newArray);
console.log("-".repeat(10));

Reto 2:

const productsV2 = [
    {title: "Pizza", price: 121, id: "馃崟"},  
    { name: "Burger", price: 121, id: '馃崝' },
    { name: "Hot cakes", price: 121, id: '馃' },
];

const update = {
    id: "馃",
    changes: {
        price: 200,
        description: "delicious",
    },
}

const productIndexV2 = productsV2.findIndex(item => item.id === update.id);

const updatedProductsV2 = productsV2
.filter(item => item.id !== update.id)
.concat({...productsV2[productIndexV2], ...update.changes});
console.log("OriginalList:",productsV2);
console.log("UpdatedList:",updatedProductsV2);

El m茅todo repeat() devuelve una cadena con un n煤mero de copias de una cadena.

1er Reto

const idx = products.findIndex(({ id }) => id === 'burger');

if (idx === -1) return console.log('Sin id producto');
myProducts.push(products[idx]);
const newProducts = products.filter((_, i) => idx !== i);

2do Reto

const idxV2 = productsV2.findIndex(({ id }) => id === update.id);

if (idxV2 === -1) return console.log('Sin id producto para actualizar');

const newProductsV2 = productsV2.map((product, i) => {
  if (i === idxV2) return { ...product, ...update.change };
  return product;
});

Cuidado con el 鈥淪hallow Copy鈥, es el que realiza el spread operator, hay varias formas de hacer un 鈥淒eep Copy鈥 bueno investigargas (JSON.parse(JSON.stringify()), lodash.clonedeep(), map() 鈥)

const products = [
    {title: "Pizza", price: 121, id: "馃崟"},  
    { name: "Burger", price: 121, id: '馃崝' },
    { name: "Hot cakes", price: 121, id: '馃' },
];

// Shallow copy, el cambio afecta al original
const products2 = [...products]
products2[1].name = "Reburguer"

console.log(1, JSON.stringify(products))
console.log(2, JSON.stringify(products2))

// Deep copy, el cambio no afecta al original
const products3 = products.map(el => ({...el}));
products3[1].name = "Miniburguer"

console.log(3, JSON.stringify(products));
console.log(4, JSON.stringify(products3));

Mi reto:
Visualizo dos formas:
1- Usando el m茅todo find() para encontrar el objeto y solo filtrar los productos en un nuevo array que no contenga ese elemento, pero solo funciona cuando se busca por valores 煤nicos (como es este caso)
2- Seguir usando el m茅todo findIndex() para encontr谩r el 铆ndice del producto y luego filtrar los productos usando el par谩metro opcional 鈥渋ndex鈥 en la arrow function como hice a continuaci贸n:

const products = [
  { title: 'Pizza', price: 121, id: '馃崟' },
  { title: 'Burger', price: 121, id: '馃崝' },
  { title: 'Hot cakes', price: 121, id: '馃' },
];

const myProducts = [];
let remindedProducts = [];


const productIndex = products.findIndex(item => item.id === '馃崝')
if (productIndex !== -1) {
  myProducts.push(products[productIndex])
  remindedProducts = products.filter((item, index) => index !== productIndex)
  // products.splice(productIndex, 1)
}

console.log('remindedProducts', remindedProducts);
console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));


Esta segunda forma es m谩s precisa porque nos garantizamos de que solo excluimos el 铆ndice deseado.

Y visualizo una tercera manera creado un arreglo nuevo usando spread operators de los elementos antes del producto y despu茅s del producto, pero creo que por el exceso de c贸digo y la complejidad es innecesaria.

Reto 1

const products = [
  {title: "Pizza", price: 121, id: "馃崟"},  
  { name: "Burger", price: 121, id: '馃崝' },
  { name: "Hot cakes", price: 121, id: '馃' },
];

const newProducts = products.filter(item => item.id !== '馃崟');

console.log(newProducts);

Reto 2

const products = [
  { title: 'Pizza', price: 121, id: '馃崟' },
  { title: 'Burger', price: 121, id: '馃崝' },
  { title: 'Hot cakes', price: 121, id: '馃' },
];

const update = {
  id: '馃',
  changes: {
      price: 200,
      description: 'delicioso'
  }
};

const productIndex = products.findIndex(item => item.id === update.id);
// Solo agrego esto
const newProduct = [...products] 

// Cambio product por newProduct
newProduct[productIndex] = {   ...products[productIndex],
  ...update.changes
};

console.log('---'.repeat(10),'products','---'.repeat(10),products)
console.log('---'.repeat(10),'newProducts','---'.repeat(10),newProduct)

Esta es mi soluci贸n para el primer reto

const nuevoArray = products.filter(item => item.id !=="馃崟")
console.log("NuevoArray", nuevoArray);

Sin mutar el original:

Reto 1:

const newProducts = products.filter((item) => item.id !== "馃崟");

Reto 2:

const newProducts2 = products.map((item) =>
		item.id === update.id ? { ...item, ...update.changes } : item
	);

El segundo challenge es m谩s sencillo de lo que parece: utiliza spread operator para sacarle una copia a los valores del objeto original. Ya sobre esa copia puedes hacer lo mismo que se le hizo en clase al objeto original.

Okay鈥 Esto es un mont贸n de c贸digo, pero aqu铆 mi soluci贸n al challenge: Me di cuenta tarde de que su implementaci贸n hubiera sido m谩s sencilla y legible con generator functions鈥 Si alguien entiende lo que quiero decir y puede reescribir mi funci贸n en gen functions, estar铆a genial. Yo la har茅 cuando tenga tiempo. 隆Saludos!


Solucion a los retos

tambien dejo el codigo

const products = [
  { title: "Pizza", price: 121, id: "馃崟" },
  { title: "Burger", price: 121, id: "馃崝" },
  { title: "Hot cakes", price: 121, id: "馃" },
];

const myProducts = products.filter((item) => item.id !== "馃");

const myChanges = {
  id: "馃崝",
  changes: { 
    descriptyion: "it is delicious", 
    type: "Fast Food" 
    },
};
const updateMyProducts = products.filter((item) => item)

const myIndex = updateMyProducts.findIndex( item => item.id === '馃崝')
updateMyProducts[myIndex] = {
    ...updateMyProducts[myIndex],
    ...myChanges.changes
}

console.log(updateMyProducts)

Asumo habr谩 una forma m谩s sencilla para hacer una modificaci贸n, sin alterar el original, pero buena, esta fue mi soluci贸n:

//Update / actualizaci贸n
const productsV2 = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];

// queremos agregarle esta actualizaci贸n a productsV
const upDate = {
    id: '馃',
    changes: {
        price: 200,
        description: 'Delicioso'
    }
}

let productsV3 = []

const productIndexV2 = productsV2.findIndex(item => item.id ===upDate.id);
productsV3 = [
    ...productsV2,
]
productsV3[productIndexV2] = {
        // usamos spread operator para que no nos reemplace completamente el elemento, sino que respete la informaci贸n que hab铆a anterior y reemplace lo que se repite y agregue informaci贸n nueva
        ...productsV3[productIndexV2],
        ...upDate.changes,
    };

console.log('v3', productsV3)
console.log('v2-original', productsV2)

Bueno, para el de eliminar un elemento, yo cre茅 un array vac铆o, luego lo filtr茅 y le hice push.

const products = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];


// eliminar un elemento sin modificar el array original

const myProducts = [];
const products2 = products.filter(item => item.id !== '馃崝')

myProducts .push(products2)

console.log("products", products);
console.log("newProducts", newProducts);
console.log("-".repeat(10));

Solutions to the challenge:
.
.
.


//Creating an array without the burger

const newMenu = products.filter(item => item.id !== '馃崝')

//create a new array without mutating the original array but with new attributes


const productsV3 = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];

const update2 = {
    changes: {
        price: 500,
        attributes: ['meaty', 'fatty', 'greasy']
    }
}

const alteredMenu = productsV3.map(i => {
    if(i.id === '馃崝'){
        return {
            ...i,
            ...update2.changes,
        }
    }else {
        return i
    }
})

Actualizaci贸n de un array sin modificar el original:

  	//Inmutable Update
  	const productsV3 = [
  	    {title: 'Pizza', price: 121, id: '馃崟'},
  	    {title: 'Burguer', price: 121, id: '馃崝'},
  	    {title: 'Hot cake', price: 121, id: '馃'},
  	];
  	const updateV3 = {
  	    id: '馃',
  	    changes: {
  	        price: 200,
  	        description: 'delicious'
  	    }
  	}
  	const newArrayV3 = [...productsV3];
  	const newArrayV3Index = newArrayV3.findIndex(item => item.id === updateV3.id);
  	newArrayV3[newArrayV3Index] = {
  	    ...newArrayV3[newArrayV3Index],
  	    ...updateV3.changes,
  	};
  	console.log('productsV3',productsV3);
  	console.log('newArrayV3',newArrayV3);

Spread operator (鈥)

Hace una copia nueva en otra referencia de memoria.

const products = [1,2,3,4,5,6,7];
const newArray = [...products];

En ese caso la variable 鈥榥ewArray鈥 es una copia en otra direcci贸n de memoria del array 鈥榩roducts鈥, por lo que el origden de los datos no se modifica, es inmutable.

Reto 1:

const products = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];
const idSearch = '馃崝'
const myProduct = products.find(({id}) => id === idSearch)
const products2 = products.filter(({id}) => id !== idSearch )

Reto 2:

const updetedProduct = products.map(product => {
    if(product.id === update.id){
        return {
            ...product,
            ...update.changes
        }
    }
    return product
})

Reto

<code> 
const products = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];
console.log('Productos Originales',products);

// Eliminando un producto sin alterar el array original
const productCopy = [...products]
productCopy.splice(1,1)
console.log('Elemento eliminado',productCopy);



// Modificando el precio de un producto y agregando una descripcion al producto
const productCopy2 = [...products]

const updatePrduct = {
    id: '馃崝',
    change:{
        price: 10,
        description: 'Hamburger of meat'
    }
}

/*
    * Usamos el metodo "findIndex" para encontrar el indice que coincide con el id de "updatePrduct".
*/
const productModifieElement = productCopy2.findIndex(item => item.id === updatePrduct.id);
/*
    * productCopy2[productModifieElement] va ser igual al indice que se encontro en productModifieElement
    * usamos el Spread Operator para copiar todo de "productCopy2" luego va acceder al elemento que contiene
    el indice "productModifieElement" que seria = '馃崝'.
    * Finalmente tambien usamos el Spread Operator para copiar todo de "updatePrduct" pero solo especificando la propiedad "change".
*/
productCopy2[productModifieElement] = {
    ...productCopy2[productModifieElement],
    ...updatePrduct.change
}
console.log('Elemento Modificado', productCopy2);

Mi soluci贸n al reto #2 con splice (funci贸n mutable), un poco fea pero funciona jeje:

.

const productsV2 = [
	{ title: "Pizza", price: 120, id: "馃崟" },
	{ title: "Burger", price: 160, id: "馃崝" },
	{ title: "Hot cakes", price: 80, id: "馃" },
];

const update = {
	id: "馃崟",
	changes: {
		price: 250,
		description: "X-Large",
	},
};

//SOLUCION FABIO
function solution(updt) {
	const productIndex = productsV2.findIndex((item) => item.id == updt.id);
	const productToUpdate = productsV2.find((item) => item.id == updt.id);
	const updatedProduct = { ...productToUpdate, ...updt.changes };
	const replacedProduct = productsV2.splice(productIndex, 1, updatedProduct);
	return productsV2;
}
console.log(solution(update));

MI soluci贸n al reto 1:

Por alguna raz贸n me aferro mucho al forEach

const productsV3 = [];
productsV2.forEach(food => {
    if (food.id === update.id) {
        food = { ...food, ...update.changes }
    }
    productsV3.push(food);
})

Tal vez sea media flaite la soluci贸n, pero en ambos casos lo solucione copiando el array original y creado otro que iba a ser modificado
Reto 1:

Reto 2:

Reto 1

const products = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];

const myProducts = [];

const product = products.findIndex(item => item.id === '馃崝')

let productsCopy = [...products];
if (product !== -1){
    myProducts.push(products[product]);
    productsCopy.splice(product,1);
    
}
console.log('productsCopy', productsCopy);
console.log("products", products);
console.log("myProducts", myProducts);

Reto 2 - Usando m茅todo slice para hacer una copia del array(no a la referencia en memoria).

const productsV2= [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];

const update = {
    id: '馃',
    changes: {
        price: 150,
        description: 'delicious',
    }
}

const productV2 = productsV2.findIndex(item => item.id === update.id)
const productsV2Copy = productsV2.slice(0);
productsV2Copy[productV2] = {
    ...productsV2Copy[productV2],
    ...update.changes

}

console.log('Original',productsV2);
console.log('Copia modificada', productsV2Copy);

Aqu铆 mi soluci贸n:

const products = [{
        name: "Pizza",
        price: 121,
        id: '馃崟'
    },
    {
        name: "Burger",
        price: 121,
        id: '馃崝'
    },
    {
        name: "Hot cakes",
        price: 355,
        id: '馃'
    },
];

const update = {
    id: '馃崟',
    changes: {
        price: 200,
        description: 'delicius'
    }
}

const productIndex = products.findIndex(item => item.id === update.id);
const shop = {
    ...products[productIndex],
    ...update.changes,
};

console.log(shop);
console.log(products);

{ name: 'Pizza', price: 200, id: '馃崟', description: 'delicius' }
[
  { name: 'Pizza', price: 121, id: '馃崟' },
  { name: 'Burger', price: 121, id: '馃崝' },
  { name: 'Hot cakes', price: 355, id: '馃' }
]

Estaba solucionando el JavaScript Hero Challenge para editar un elemento sin mutar el array original y este fue mi output.

function solution(array, index, newValue) {
 	// Tu c贸digo aqu铆 馃憟 
	 return [...array.slice(0, index), newValue, ...array.slice(index+1)]
}; 

Por si a alguien le sirve a futuro :p

Por aqui dejo mis respuestas:

1ra:

function retoMutableNewArray (array, query){
  return array.filter(item => item.id !== query)
}

2da:

function retoMutableCopiaAlterada(array,updates){
  const index = array.findIndex(item => item.id === updates.id);
  const rta = [...array];
  rta[index] = {
    ...rta[index],
    ...updates.changes,
  }
return rta;

} 

Reto 2:

const productsV2 = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];

const update = {
    id: '馃',
    changes: {
        price: 200,
        description: 'delicious'
    }
}

const productIndexV2 = productsV2.findIndex(item => item.id === update.id) 
const newListV2 = [...productsV2]

newListV2[productIndexV2] = {
    ...newListV2[productIndexV2],
    ...update.changes
}

console.log({productsV2})
console.log({newListV2})

Reto 1:

const products = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];

const myProducts = [];
const newList = [...products];

const productIndex = products.findIndex(item => item.id === ('馃崟')) 
if(productIndex !== -1){
    myProducts.push(products[productIndex])
    newList.splice(productIndex, 1)
}

console.log({newList})
console.log({myProducts})
console.log({products})
const products = [
    { title: 'Pizza', price: 121, id: '馃崟'  },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];

// Reto 1: Eliminar un elemento sin modificar el array original

const myProducts = [];

console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));


const product = products.find(item => item.id === '馃崝' );
if (product) {
    var productsModificado = [...products];

    myProducts.push(product);
    productsModificado.splice(products.indexOf(product), 1);
}

console.log("products", products);
console.log("productsModificado", productsModificado);
console.log("myProducts", myProducts);
console.log("-".repeat(10));


// Reto 2: Como hacer una modificacion de array pero sin modificar el original.

const update = {
    id: '馃',
    changes: {
        price: 200,
        description: 'delicioso'
    }
}

const productsV2Modificado = [...products];

const productIndex = productsV2Modificado.findIndex(item => item.id === update.id );

productsV2Modificado[productIndex] = {
    ...productsV2Modificado[productIndex],
    ...update.changes,
};

console.log("products", products);
console.log("productsV2Modificado", productsV2Modificado);
console.log("-".repeat(10));

El spreed operator nos permite expandir o distribuir los elementos de array u objeto en las partes del c贸digo donde admitan estos elementos.
Basicamente nos distribuye los elementos (o expandiendo en un array) en un array nuevo.
驴Que podemos hacer con el SpreedOperator?
Copiar un array:

const lista1 = [1, 2, 3];
const listaResultante = [...lista1]

Resultado

lista [ 1, 2, 3 ]
ListaResultante [ 1, 2, 3 ]

Unir (o fusionar) arrays

const lista1 = [1, 2, 3];
const lista2 = [4, 5, 6];
const listaResultante = [...lista1, ...lista2]

Resultado

ListaResultante [ 1, 2, 3, 4, 5, 6 ]

Tambien podemos a帽adir otros elementos al mismo array (no necesariamente arrays u objetos)

const listaResultante = [...lista1, ...lista2, 2, 4, 7]

Lo que mas me llamo la atencion es que se pueden llamar funciones con Spread Operator, de la siguiente manera:
Supongamos que tenemos la siguiente funcion:

function suma (n1, n2, n3){
    suma = n1 + n2 + n3
    return suma
}

Nuestro console.log ser谩 asi console.log(suma(...lista1))
y el resultado: 6

Podemos trabajar con objetos, RECORDAR, que esto lo podemos hacer porque los objetos es un conjunto de elementos separados por comas, aunque no podemos realizar las mismas acciones que con arrays.

const persona = {
    Nombre: 'Sebastian',
    Apellido: 'Romeero',
    Direccion: 'Luchiano 123'
}
const trabajo = {
    tipo: 'Programador',
    tarea: 'Back-end',
    compensaciones: {
        internet: false,
        computadora: true
    }
}

const empleado = {
    ...persona,
    ...trabajo
}

Resultado:

{
  Nombre: 'Sebastian',
  Apellido: 'Romeero',
  Direccion: 'Luchiano 123',
  tipo: 'Programador',
  tarea: 'Back-end',
  compensaciones: { internet: false, computadora: true }
}

se pueden a帽adir otros elementos igual que con el array:

const empleado = {
    ...persona,
    ...trabajo,
    nivel: 'Junior'
}

No esta de mas recordar que lo que hacemos es una especie de copia, por lo tanto, si a nuestro array u objeto original le cambiamos las caracteristicas, este cambio solo se manifestara en el original, mas no en el Spread. Esto se comprendera mejor entre mas se profundice en los objetos mutables e inmutables.


.
.
Codigo:

	const products = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];

const myProducts = [];
let productsMutable = [];

console.log("products", products);
console.log("myProducts", myProducts);
console.log("=".repeat(40));
console.log("=".repeat(40));


function buscarProducto(id){
    productsMutable = products.filter(item => item.id !== id);

    let product = products.find(item => item.id === id);
    myProducts.push(product);
}


buscarProducto("馃崟");

console.log("Prodcutos origina: ", products);
console.log("Productos mutados: ", productsMutable);
console.log("Producto seleccionado: ", myProducts);

Paso a dejar mis soluciones:
RETO 1:

const products = [
  { title: 'Pizza', price: 121, id: '馃崟' },
  { title: 'Burger', price: 121, id: '馃崝' },
  { title: 'Hot cakes', price: 121, id: '馃' },
];

const eliminarProducto = (arr, id) => arr.filter((item) => item.id !== id)
console.log(eliminarProducto(products, '馃崝'));// eliminamos el producto con id '馃崝'

console.log(products); // verificamos que el array original no muto

RETO 2:

const productsV2 = [
  { title: 'Pizza', price: 121, id: '馃崟' },
  { title: 'Burger', price: 121, id: '馃崝' },
  { title: 'Hot cakes', price: 121, id: '馃' },
];

const cambios = {
  id: '馃崝',
  changes : {
    price: 200,
    description: "Que deliciosa hamburguesa"
  }
};

const actualizarProducto = (arr, obj) => arr.map( item => (item.id === obj.id) ? { ...item, ...obj.changes } : { ...item })
console.log(actualizarProducto(productsV2, cambios))
console.log(productsV2)

Reto 1

const products = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];

const myProducts = [...products.filter(item => item.id != '馃崝')];



console.log("products", products);
console.log("myProducts", myProducts); 

Reto 2

const products = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];

const update = {
    id: '馃',
    changes: {
        price:200,
        description:'delicioso',
    } 
}

const updateProduct = [...products.map(item => item.id==update.id? {...item, ...update.changes}:item)]

console.log('update',updateProduct)

Reto 1:

B谩sicamente lo que hice fue hacer una funci贸n que por dentro creaba un array llamado 鈥減roductsChoose鈥 el cual s铆 iba a mutar, y con ese trabaj茅

const products = [
  { title: 'Pizza', price: 121, id: '馃崟' },
  { title: 'Burger', price: 121, id: '馃崝' },
  { title: 'Hot cakes', price: 121, id: '馃' },
];

const myProducts = [];

console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));

const productIndex = products.findIndex(item => item.id === '馃崝');

if(productIndex !== -1) {
  foo()
}

function foo() {
  const productsChoose = []
  products.forEach(item => productsChoose.push(item))
  myProducts.push(products[productIndex]);
  productsChoose.splice(productIndex, 1);

  console.log('foo', productsChoose)
}

console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));

Reto 2:
En este reto hice algo parecido, cree una condicional igual a la que el profesor us贸 antes. Si el objeto existe, ejecuta el c贸digo. Y all铆 cree el array mutable y por dentro puse los console.log()

const productsV2 = [
  { title: 'Pizza', price: 121, id: '馃崟' },
  { title: 'Burger', price: 121, id: '馃崝' },
  { title: 'Hot cakes', price: 121, id: '馃' },
];

const update = {
  id: '馃',
  changes: {
      price: 200,
      description: 'Sweet'
  }
}

const productIndexV2 = productsV2.findIndex(item => item.id === update.id)

if(productIndexV2 !== -1) {
  const updatedArray = [];
  productsV2.forEach(item => updatedArray.push(item))
  
  updatedArray[productIndexV2] = {
    ...updatedArray[productIndexV2],
    ...update.changes,
  }

  console.log('products', productsV2)
  console.log('updated', updatedArray)
}

Una soluci贸n generalizada

const products = [
  { title: 'Pizza', price: 121, id: '馃崟' },
  { title: 'Burger', price: 121, id: '馃崝' },
  { title: 'Hot cakes', price: 121, id: '馃' },
];

const myProducts = [];

let updates;

// Challenge 1
// Filter products list according by cart's product list (myProducts)
function productsFiltered(products, productIndexes) {
  return products.filter(item => !productIndexes.includes(item.id));
}

// Challenge 2
// Update products list according updates array
function productsUpdates(products, updates) {
  if (updates != undefined) {
    return products.map(item => {
      itemTemp = item;
      updates.map(update => {
        if (item.id === update.id) {
          itemTemp = {
            ...item,
            ...update.changes,
          }
        }
      });
      return itemTemp;
    });
  } else {
    return products;
  }
}

// Show lists status
function printStatus(products, myProducts, updates) {
  // Get cart's product indexes
  let productIndexes = myProducts.map(item => item.id);
  let productsTemp = productsFiltered(productsUpdates(products, updates), productIndexes);
  console.log("products", productsTemp);
  console.log("myProducts", myProducts);
  console.log("-".repeat(10));
}

printStatus(products, myProducts, updates);

const productIndex = products.findIndex(item => item.id === '馃崝');
if (productIndex !== -1) {
  // Added to cart
  myProducts.push(products[productIndex]);
  // Mutable erasing
  // products.splice(productIndex, 1);
}

printStatus(products, myProducts, updates);

// Update a product
updates = [
  {
    id: "馃",
    changes: {
      price: 30,
      description: 'Delicious',
    }
  },
  {
    id: "馃崟",
    changes: {
      price: 50,
      description: 'Great',
    }
  }
];
printStatus(products, myProducts, updates);

// Mutables update
/*
const productIndex2 = products.findIndex(item => item.id === update.id);
products[productIndex2] = {
  ...products[productIndex2],
  ...update.changes,
}*/

Dejo mi solucion a los retos

//Quiero eliminar de products sin modificar el array de products

if (productIndex) {
    myProducts.push(products[productIndex])
}
const newProducts = products.filter(item => item.id != '馃崝' );


console.log("products", products);
console.log("myProducts", myProducts);
console.log("newProducts", newProducts);
console.log("-".repeat(10));
const newProduct = products.map(item => {
    if (item.id === products[productIndex].id) {
        item = {
            ...products[productIndex],
            ...update.changes
        }
    }
    return item;
})

console.log('products', products)
console.log('newProduct', newProduct);

update immutable

const products = [
  { title: "Pizza", price: 121, id: "馃崟" },
  { title: "Burger", price: 121, id: "馃崝" },
  { title: "Hot cakes", price: 121, id: "馃" },
];
console.log("products", products);
console.log("-".repeat(10));

const update = {
  id: "馃",
  changes: {
    price: 200,
    description: "delicioso",
  },
};


const products2 = [...products];
const productIndex = products2.findIndex((item) => item.id === update.id);

products2[productIndex] = {
  ...products2[productIndex],
  ...update.changes,
};

console.log("update products", products2);
console.log("products", products);

spliceInmutable

const products = [
    { title: "Pizza", price: 121, id: "馃崟" },
    { title: "Burger", price: 121, id: "馃崝" },
    { title: "Hot cakes", price: 121, id: "馃" },
  ];
  
  console.log("products", products);
  console.log("-".repeat(10));
  console.log('Splice Inmutable',spliceInmutable(products,2,1));
  console.log("products", products);

  function spliceInmutable(array,startIndex,deleteCount){
    let newArray=[];
    const endIndex=startIndex+deleteCount-1;
    array.forEach((value,index) => {
       if(!(index>=startIndex && index<=endIndex)){
            newArray.push(value);
       }
    });
    return newArray;
  }

Reto 1:

const nuevoArray = products.filter(item => item.id !=='馃崝');

Reto 2:

const arrayUpdate = productsV2.map(item =>{
    if(item.id === update.id){
        return {
            ...item,
            ...update.changes
        }
    } else {
        return {
            ...item
        }
    }
});

Update sin modificar el original :

<code> 
const productsV2 = [
  { title: 'Pizza', price: 121, id: '馃崟' },
  { title: 'Burger', price: 121, id: '馃崝' },
  { title: 'Hot cakes', price: 121, id: '馃' },
];

const update = {
  id: '馃',
  changes: {
    price: 200,
    description: 'delicioso'
  }
}

const newProductsV2 = [];
const productIndexV2 = productsV2.findIndex(item => item.id === update.id);
if (productIndexV2 != -1){
newProductsV2.push(...productsV2);
newProductsV2[productIndexV2] = {
  ...productsV2[productIndexV2],
  ...update.changes,
};
}
console.log('original', productsV2);
console.log('update', newProductsV2);

Crear nuevo array sin el producto seleccionado pero sin eliminarlo del original:

<code
const products = [
  { title: 'Pizza', price: 121, id: '馃崟' },
  { title: 'Burger', price: 121, id: '馃崝' },
  { title: 'Hot cakes', price: 121, id: '馃' },
];
const myProducts = [];
const productIndex = products.findIndex(item => item.id === '馃崝');
if (productIndex != -1) {
  myProducts.push(...products);
  myProducts.splice(productIndex, 1);
}
>

Aqui mi solucion para el problema dos, preferi usar un map, no se si haya otra forma jaja

const productUpdate = productsV2.map((item) =>
  item.id === update.id ? (item = { ...item, ...update.changes }) : item
);
console.log(productUpdate, productsV2);

bueno aca estan mis respuestas auque el profe ni lo va a revisar porque veo que muchas respuestas tienen mas de 8 meses,

reto 1

const products = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];

const myProducts = [];
let itemFilter
const myItem = products.find(item => item.id === '馃崝');
(myItem) ?
itemFilter = products.filter(item => item.id != myItem.id):
console.log('item no mach')

console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));

reto 2

const products2 = [
  { title: 'Pizza', price: 121, id: '馃崟' },
  { title: 'Burger', price: 121, id: '馃崝' },
  { title: 'Hot cakes', price: 121, id: '馃' },
];
const update = {
  id:'馃',
  changes : {
      price: 200,
      description: 'delicius'
  }
}

const findProduct = products2.findIndex(item => item.id === update.id)
const newListProducts = [...products2];
newListProducts[findProduct] = {...products2[findProduct],...update.changes}
console.table(products2)
console.table(newListProducts)

Este fue el c贸digo que utiliz茅, b谩sicamente us茅 el spread operation para guardar el array dentro de uno nuevo y posteriormente manipularlo, sin tocar el original.

const productIndex = products.findIndex(item => item.id === '馃崝')
let newProducts
if (productIndex){
    myProducts.push(products[productIndex]);
    newProducts = [...products];
    newProducts.splice(productIndex, 1);
}
console.log("-".repeat(10));
console.log("myProducts", myProducts);
console.log("-".repeat(10));
console.log('Challenge')
console.log("-".repeat(10));
console.log("newProducts", newProducts);
console.log("Original products", products);

Reto 1:

const products = [
    { title: "Pizza", price: 121, id: "馃崟" },
    { title: "Burger", price: 121, id: "馃崝" },
    { title: "Hot cakes", price: 121, id: "馃" },
];

let myProducts = [];

const copyProducts = products.map(element => element);
const index = copyProducts.findIndex(element => element.id === '馃');
if (index) {
    copyProducts.splice(index, 1);
    myProducts = copyProducts;
}
console.log('Orignal Array', products);
console.log('Nuevo Array:', myProducts);

Reto 2:

const products2 = [
    { title: "Pizza", price: 121, id: "馃崟" },
    { title: "Burger", price: 121, id: "馃崝" },
    { title: "Hot cakes", price: 121, id: "馃" },
];

const update = {
    id: '馃',
    changes: {
        price: 200,
        description: 'New product'
    }
};

let updateProducts = products2.map(element => element);
const updateProductsIndex = updateProducts.map(element => element).findIndex(element => element.id === update.id);
updateProducts[updateProductsIndex] = {
    ...updateProducts[updateProductsIndex],
    ...update.changes
}

console.log('Productos 2 original', products2);
console.log('Actualizaci贸n de productos 2', updateProducts);

mi solucion de manera reutilizable

function noModificarOriginal(array, itemEncontrar) {
	let encontrarItem = array
		.filter(item => item.id === itemEncontrar) //encuentra el item
		.map(item => {
			return {
				...item,
				...update.changes,
			};
		}); // modifica el item encontrado
	let mewArrayModified = array
		.filter(item => item.id !== itemEncontrar) // nuevo array sin el item
		.concat(encontrarItem); // agrega el item encontrado y modificado

	return mewArrayModified;
}

const arrayModificado = noModificarOriginal(products, update.id);

console.log(arrayModificado); // array modificado
console.log(products); // array original intacto
const products = [
	{ title: 'Pizza', price: 121, id: 'pizza' },
	{ title: 'Burger', price: 121, id: 'burger' },
	{ title: 'Hot cakes', price: 121, id: 'hot cakes' },
];

const productsNotDeleted = products.filter(product => product.id !== 'burger');
console.log('productos no eliminados', productsNotDeleted);

const update = {
	id: 'hot cakes',
	changes: { price: 200, description: 'delicious' },
};

const updateProducts = products.reduce((previousValue, currentValue) => {
	if (currentValue.id === update.id) {
		previousValue.push({
			...currentValue,
			...update.changes,
		});
	} else {
		previousValue.push(currentValue);
	}
	return previousValue;
}, []);

console.log('productos actualizados', updateProducts);
console.log('productos', products);

Hola esta es mi soluci贸n del reto

const products = [
  { title: 'Pizza', price: 121, id: '馃崟' },
  { title: 'Burger', price: 121, id: '馃崝' },
  { title: 'Hot cakes', price: 121, id: '馃' },
];
const resp = products.filter(item => item.id !== '馃崝')
console.log(resp);
console.log(products)
Reto 1
const products = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];

const myProducts = [];
console.group("Reto1");
console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));

//Reto1
const reto = products.filter(item => item.id !== '馃崝');
console.log(reto)
console.groupEnd();

Reto2


const productsV2 = [
    { title: "Pizza", price: 121, id: "馃崟" },
    { title: "Burger", price: 121, id: "馃崝" },
    { title: "Hot cakes", price: 121, id: "馃" },
];
const update = {
    id: "馃",
    changes: {
        price: 200,
        description: 'delicioso'
    }
}
const products2Original = [...productsV2]

const productIndexV2 = productsV2.findIndex(item => item.id === update.id);
productsV2[productIndexV2] = {
    ...productsV2[productIndexV2],
    ...update.changes,
};
console.log(products2Original);
console.log(productsV2);

 const arreglo1=[
                  {nombre:'camilo',
                edad:22},
                {nombre:'jesus',
                edad:19},
                {nombre:'pedro',
                edad:20}
              ]

              const arreglo2={
                  ...arreglo1.find(persona=>persona.nombre==='camilo'),
                  edad:24,
                  nacionalidad:'colombiano'
              } 
             
               console.log(arreglo2)
               console.log(arreglo1)

Para los dos retos la soluci贸n es la misma linea.
En este caso se muestra la soluci贸n al segundo reto donde la primera linea es donde se tiene que agregar copiando el array con spread operator

Y aqu铆 el resultado en la consola

Reto .

const products = [
  { title: "Pizza", price: 121, id: "馃崟" },
  { title: "Burger", price: 121, id: "馃崝" },
  { title: "Hot cakes", price: 121, id: "馃" },
];

const myProducts = [];
const product = products.find((item) => item.id === "馃");
let newProducts = [];
if (product) {
  const indexItem = products.findIndex((item) => item.id === product.id);
  console.log(indexItem);
  newProducts = [...products];
  newProducts.splice(indexItem, 1);
  myProducts.push(product);
}

console.log("products", products);
console.log("myProducts", myProducts);
console.log("newProducts", newProducts);

Reto 1
Eliminar un elemento sin borrarlo del la lista original.

const products = [
    { title: "Pizza", price: 121, id: "馃崟" },
    { title: "Burger", price: 121, id: "馃崝" },
    { title: "Hot cakes", price: 121, id: "馃" },
  ];
  
const newProduct = products.filter(item => item.id !== "馃崝");

console.log("newProduct", newProduct);
console.log("products", products);

El m茅todo splice retorna un array con los elementos eliminados. Aqu铆 una forma de utilizar ese array retornado:

const products = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];

const myProducts = [];

const productIndex = products.findIndex(item => item.id === '馃崝')
if (productIndex !== -1) {
    myProducts.push(...products.splice(productIndex, 1));
}

console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));

solucion al reto de eliminacion:

import { IProducts } from '../../types'

const products = [
  { title: 'Pizza', price: 121, id: '馃崟' },
  { title: 'Burger', price: 121, id: '馃崝' },
  { title: 'Hot cakes', price: 121, id: '馃' }
]

const myProducts: IProducts[] = []
let productsFilter: IProducts[] = []
console.log('products', products)
console.log('myProducts', myProducts)
console.log('-'.repeat(10))

const productIndex = products.findIndex(item => item.id === '馃崝')

if (productIndex !== -1) {
  myProducts.push(products[productIndex])
  // products.splice(productIndex, 1)
  productsFilter = products.filter(item => item.id !== products[productIndex].id)
}

console.log('myproducts:', myProducts)
console.log(products)
console.log(productsFilter)
const productsV2 = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];


const updates = productsV2.map(item => {
    return {
        ...item,
        description: "The best Food",
        price: 150
    }
});

console.log(productsV2);
console.log(updates);
const challenge1 = products.filter(item => item.id !== '馃崝');
const challenge2 = productsV2.map(item => (item.id === update.id) ? {...item, ...update.changes} : item);

Esta es mi solucion para el segundo reto:D

const products = [
   { title: 'Pizza', price: 121, id: 'Pizza' },
   { title: 'Burger', price: 121, id: 'Burger' },
   { title: 'Hot cakes', price: 121, id: 'Hot Cakes' },
];

const changeProducts = [...products];

const update = {
   title: 'Super Burger',
   price: 250,
};

const updateProduct = (idProduct) => {
   const productIndex = changeProducts.findIndex((i) => i.id === idProduct);
   changeProducts[productIndex] = {
      ...changeProducts[productIndex],
      ...update,
   };
};

updateProduct('Burger');

Challenged no. 2 completed

Le comparto mi soluciones a los retos. 馃槃

Reto 1

const products = 
[
    {
        title: 'Pizza',
        price: 121,
        id: '馃崟',
    },
    {
        title: 'Burger',
        price: 121,
        id: '馃崝',
    },
    {
        title: 'Hot cakes',
        price: 121,
        id: '馃',
    },
];
const myProducts = [];
let newProducts = [];

const productIndex = products.findIndex(({id}) => id === '馃崝');
if (productIndex !== -1) {
    myProducts.push(products[productIndex]);
    newProducts = products.filter(({id}) => id !== '馃崝');
}
console.log({products, newProducts, myProducts});

Reto 2

function addChanges (item) {
    let newItem = {...item};
    if (item['id'] === update['id']) {
        newItem = {
            ...item,
            ...update['changes']
        }
    }
    return newItem;
}

const productsV2  = 
[
    {
        title: 'Pizza',
        price: 121,
        id: '馃崟',
    },
    {
        title: 'Burger',
        price: 121,
        id: '馃崝',
    },
    {
        title: 'Hot cakes',
        price: 121,
        id: '馃',
    },
];

const update = {
    id: '馃',
    changes: {
        price: 200,
        description: 'Delicioso',
    },
}

const newArrayProductV2 = productsV2.map(addChanges(item));
console.log({newArrayProductV2});


Reto 1:

const myProducts = [];

myProducts.push(...products)

myProducts.splice(1,1)

RETO 1:

const products = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];


console.log("products", products);
console.log("-".repeat(10));

const newproducts = products.reduce((arr, cur, index) => {
    if (cur.id == '馃崝') {
        arr.splice(index, 1);
    }
    return arr;
}, [...products]);

console.log("products", products);
console.log("newProducts", newproducts);
console.log("-".repeat(10));

RETO2:

const products = [
  { title: 'Pizza', price: 121, id: '馃崟' },
  { title: 'Burger', price: 121, id: '馃崝' },
  { title: 'Hot cakes', price: 121, id: '馃' },
];

const update = {
  id: '馃',
  changes: {
    price: 200,
    description: 'delicious'
  }
}

const products_update = products.reduce((arr, cur, index) => {
  if (cur.id == update.id) {
    arr[index] = {
      ...arr[index],
      ...update.changes
    }
  }
  return arr;
}, [...products]);


console.log('products', products);
console.log('products_update', products_update);

Espero tu like se帽or Nicolas

//reto1 eliminar un producto sin modificar el array original
const productsV2 = products.filter(element => element.id !== "馃崝")

console.log(productsV2)


//reto2 actualizar un elemnto sin modificar el array original
const update = {
    id: "馃",
    changes: {
        price: 200,
        description: 'delicioso'
    }
}

const productsV3 = products.map(element => {
    if(element.id === update.id) {
        element = {...element, ...update.changes}
    }
    return element
})

console.log("productsV3",productsV3)

Aprovechando el resultado del m茅todo findIndex, donde se obtiene el index respectivo, se podria hacer de la siguiente manera:

    const productUpdateV2 = productsV2.map((product, index) => {
        if(index !== productIndexV2){
            return product;
        }else{
            return {
                ...product,
                ...update.changes
            }
        }
    });
const productsV2 = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];

const update = {
    id: '馃',
    changes: {
        title: 'Hot cakes',
        price: 121,
        description: 'Delicious'
    }
}

console.log('Products', productsV2);

const newProductsV2 = [...productsV2];
console.log('New Porducts 1', newProductsV2);

const newProductIndex = newProductsV2.findIndex(element => element.id === update.id);
if (newProductIndex != -1) {
    newProductsV2[newProductIndex] =
    {
        ...newProductsV2[newProductIndex],
        ...update.changes,
    }
}

console.log('New Porducts 2', newProductsV2);
console.log('Products', productsV2);

Mi soluci贸n鈥

//Delete
const products = [
  { title: 'Pizza', price: 121, id: '馃崟' },
  { title: 'Burger', price: 121, id: '馃崝' },
  { title: 'Hot cakes', price: 121, id: '馃' },
];

const myProducts = products.filter(item => item.id !== '馃崝');

console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));


// Update

const products2 = [
  { title: 'Pizza', price: 121, id: '馃崟' },
  { title: 'Burger', price: 121, id: '馃崝' },
  { title: 'Hot cakes', price: 121, id: '馃' },
];

const ans = products2.map(item => {
  if (item.id === '馃') {
    return {
      ...item,
      price: 200,
      description: 'pankakes' 
    }
  }
  return item
})

console.log("products2", products2);
console.log("ans", ans);
console.log("-".repeat(10));

Solucion
Reto 1 para eliminar el valor que se agrego solo se agrega esta linea de codigo

const newProducts = products.filter(item => item.id !== '馃崝');

Reto 2:

const productsV2 = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];

const update = {
    id: '馃崝',
    changes: {
        price: 300,
        description: 'delisius',
    }
};
const productIndex2 = productsV2.findIndex(item => item.id === '馃崝');
const productsV3 = productsV2.map(product => {
    if(product.id != '馃崝' ){
        return product;
    }else{
        product = {
            ...product,
            ...update.changes,
        }
        return product;
    }
});
console.log(productsV2);
console.log(productsV3);

Soluci贸n a reto

const myProducts = [];
myProducts.push(products[0]);
myProducts.push(products[2]);

Eliminar

if(productIndexDelete !== -1) {
    myProducts.push(products[productIndexDelete]);
    products.filter(product => product.id !== '馃崝');
}>

Editar

const productsV3 = productsV2.map(item => item.id === update.id ? {...update} : {...item});

Reto 1:
Eliminar un elemento sin borrarlo del la lista original.
Soluci贸n: usar filter:

const products = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];

const nuevoArray = products.filter(item => {
    return item.id !== '馃崝';
})
console.log('Array Original: ', products);
console.log('Array Nuevo: ', nuevoArray);

Reto 2:

Modificar un array pero sin modificar el array original usando map.

const productsV2 = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];


const update = {
    id: '馃',
    changes: {
        price: 200,
        description: 'delicious',
    },
}
const productsV2Nuevo = productsV2.map(item => item);

const productIndex2 = productsV2Nuevo.findIndex(item => item.id === update.id);
//Fucion de el estado anterior y los cambios que yo quiero poner
productsV2Nuevo[productIndex2] = {
    ...productsV2Nuevo[productIndex2],
    ...update.changes,
};
console.log('Nuevo Array:', productsV2Nuevo);
console.log('Viejo Array: ', productsV2);

Yo solucion茅 ambos retos usando el spread operator:

const products = [
  {title: "Pizza", price: 121, id: "馃崟"},
  { name: "Burger", price: 121, id: '馃崝' },
  { name: "Hot cakes", price: 121, id: '馃' },
];

const productIndex=products.findIndex(product => product.id === '馃崝');
const productsWithoutBurger = [...products];
if(productIndex != -1) {
  productsWithoutBurger.splice(productIndex,1);
}

console.log('Original', products)
console.log('Modified', productsWithoutBurger)

const update = {
  id: '馃',
  changes: {
    price: 200,
    description: 'delicioso'
  }
}

const productIndex1 = products.findIndex(product => product.id === '馃');
const productsHotCakeEdited = [...products];
if(productIndex1 != -1) {
  productsHotCakeEdited[productIndex1]= {
    ...productsHotCakeEdited[productIndex1],
    ...update.changes,
  };
}

console.log('Original', products)
console.log('Hot Cake Modified', productsHotCakeEdited)

Challenge 1

//CHALLENGE 1

const products = [
  { title: "Pizza", price: 121, id: "馃崟" },
  { title: "Burger", price: 121, id: "馃崝" },
  { title: "Hot cakes", price: 121, id: "馃" },
];

const newArray = products.filter((item) => {
  if (item.id !== "馃崟") {
    return item;
  }
});

console.log("products", products);
console.log("newArray", newArray);

challenge 2

//CHALLENGE 2

const productsV2 = [
  { title: "Pizza", price: 121, id: "馃崟" },
  { title: "Burger", price: 121, id: "馃崝" },
  { title: "Hot cakes", price: 121, id: "馃" },
];

const otherArray = [];

const update = {
  id: "馃崝",
  changes: {
    price: 200,
    descripcion: "delicious",
  },
};

productsV2.forEach((item) => otherArray.push(item));

const productIndex = otherArray.findIndex((item) => item.id === update.id);
otherArray[productIndex] = {
  ...otherArray[productIndex],
  ...update.changes,
};

console.log(productsV2);
console.log("-".repeat(10));
console.log("new", otherArray);

Mi solucion al reto 1, hay una parte de codigo comentado que fue el de la clase, de resto, muestro 2 posibles soluciones:

const products = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];

const myProducts = [];

console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));

//utils

const selection = products.findIndex(item => item.id === '馃崝');
if(selection !== -1){
    myProducts.push(products[selection]);
}

//solution 1
const newList = products.map(item => ({...item}))
newList.splice(selection, 1)
console.log('newList', newList)

//solution 2
const newList2 = [...products]
newList2.splice(selection, 1)
console.log('newList2', newList2)

//class example
// const selection = products.findIndex(item => item.id === '馃崝');
// console.log(selection)
// if(selection !== -1){
//     myProducts.push(products[selection]);
//     products.splice(selection, 1);
// }

console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));

Reto 1:
.
En mi caso, se me ocurri贸 crear una funci贸n que recibiera como par谩metros el array, el 铆ndice desde el que se desee eliminar, y la cantidad de elementos a eliminar. Esto permitir谩 eliminar los elementos que se deseen de un array, tal como lo hace splice.
.

Reto 1:

Reto 2:

Hola les dejo mi soluci贸n!

const products3 = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];

const newArrayFilter = products3.filter((item) => {
    return item.id != '馃崝';
});
//reto 1
console.log('newArrayFilter',newArrayFilter);
const update2 = {
    id: '馃',
    changes: {
        price: 200,
        description: 'delicioso'
    }
}

const newArrayUpdateMap = products3.map((item) => {
    if (item.id === update2.id) {
        item = {...item,...update2.changes}
    }
    return item;
})

//reto 2
console.log('products3',products3);
console.log('newArrayUpdateMap',newArrayUpdateMap);



desafio #1

const products = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
]

const myProducts = [];

const searchIndex = products.findIndex(e => e.id === '馃崝')

if (searchIndex !== -1){
    myProducts.push(products[searchIndex])
    rta = products.filter(e => e.id !== '馃崝')
}

console.log("products", products);
console.log("rta", rta)
console.log("myProducts", myProducts);
console.log("-".repeat(10));

desafio #2

const products = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
]

const update = {
    id: '馃',
    changes: {
        price: 200,
        description: '隆delicious!'
    }
}

const rta = products.map(e => {
    if (e.id === update.id){
        return {
            ...e,
            ...update.changes,
        }
    } else {
        return {
            ...e,
        }
    }
})

console.log(rta)

Reto 1:

const products2 = [
  { title: 'Pizza', price: 121, id: '馃崟' },
  { title: 'Burger', price: 121, id: '馃崝' },
  { title: 'Hot cakes', price: 121, id: '馃' },
];

const myProducts2 = [];

products2.find(product => {
  product.id === '馃崝' && myProducts2.push(product);
})

console.log('myProducts2:', myProducts2);

const newArray = [...products2];
newArray.splice(newArray.findIndex(product => product.id === '馃崝'), 1);

console.log('products2:', products2);
console.log('newArray:', newArray);

Reto 2:

const products3 = [
  { title: 'Pizza', price: 121, id: '馃崟' },
  { title: 'Burger', price: 121, id: '馃崝' },
  { title: 'Hot cakes', price: 121, id: '馃' },
];

const burger = products3.findIndex(product => product.id === '馃崝');

const updateBurger = {
  id: "馃崝",
  changes: {
    price: 240,
    description: 'tasty'
  }
}

const newArray3 = [...products3];

newArray3[burger] = {
  ...newArray3[burger],
  ...updateBurger.changes
};

console.log('products3:', products3);
console.log('newArray3:', newArray3);

Esta fue mi forma de hacer el ejercicio:

const update = {
    id: "馃",
    changes: {
        price: 200,
        description: 'delicioso'
    }
}

const updateArray = products.map(element=>{
    if(element.id==='馃'){
        return {
            ...element,
            ...update.changes    
        }
    }else{
        return element;
    }
});

console.log(updateArray);
console.log(products);

Reto 1

const products = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];
const newProducts = [];
let oldProducts;
const productIndex = products.findIndex(item => {
    if(item.id == '馃崝'){
        oldProducts = products.filter(item => item.id != '馃崝')
        return item
    }
});
if(productIndex != -1){
    newProducts.push(products[productIndex])
}
console.log(newProducts)
console.log(oldProducts)

Reto 2

const productsV4 = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];

const productsUpdated = productsV4.map(item => {
    if(item.id == update.id){
        item = {
            ...item,
            ...update.changes,
        }
    }
    return item
})

console.log('Products updated:', productsUpdated)

RETO #2

const newArr = productsV2.map(item => {
    if(item.id === update.id){
      return {...item, ...update.changes}
    }else{
        return item;
    }
});

console.log(productsV2);
console.log(newArr);

RETO #1 馃槃

const products = [
    { name: "Pizza", price: 121, id: "馃崟"},  
    { name: "Burger", price: 121, id: '馃崝' },
    { name: "Hot cakes", price: 121, id: '馃' },
];

const myProducts = [];
let newArray;
const productIndex = products.findIndex(item => item.id === "馃崝");
if (productIndex !== -1) {
    myProducts.push(products[productIndex]); 
    newArray = products.filter(item => item != products[productIndex]);
}
console.log("Products:",products);
console.log("MyProducts:", myProducts);
console.log("newArray:",newArray);



RETO #2 馃槢

const productsV2 = [
    { name: "Pizza", price: 121, id: "馃崟"},  
    { name: "Burger", price: 121, id: '馃崝' },
    { name: "Hot cakes", price: 121, id: '馃' },
];

const update = {
    id: "馃",
    changes: {
        price: 200,
        description: "Genial",
    },
}

const productIndexV2 = productsV2.findIndex(item => item.id === update.id);

const updatedProductsV2 = productsV2
.filter(item => item.id !== update.id)
.concat({...productsV2[productIndexV2], ...update.changes});


console.log("OriginalList:",productsV2);
console.log("UpdatedList:",updatedProductsV2);

CODIGO DEL SEGUNDO RETO.
POR FAVOR DENME SUGERENCIAS Y CORRIJANME


const productsV2 = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];
const update = {
    id: '馃',
    changes: {
        price: 200,
        description: 'delicioso'
    }
}

const newProductsV2 = productsV2.map(item=>item)

const productIndexV2 = newProductsV2.findIndex(item => item.id === update.id)
newProductsV2[productIndexV2] = {
    ...newProductsV2[productIndexV2],
    ...update.changes,
};

console.log(productsV2)
console.log('-------------------------')
console.log(newProductsV2)

Dejo mi codigo del primer reto! Agradezco sugerencias y correcciones!

const products = [
    { title: 'Pizza', price: 121, id: '馃崟' },
    { title: 'Burger', price: 121, id: '馃崝' },
    { title: 'Hot cakes', price: 121, id: '馃' },
];

const myProducts = [];
/*
console.log("products", products);
console.log("myProducts", myProducts);
console.log("-".repeat(10));*/

const productIndex = products.findIndex(item => item.id === '馃崝' )
let newArr;
if(productIndex !== -1){
    myProducts.push(products[productIndex]);
    newArr = products.map(item => item)//
    newArr.splice(productIndex,1);
   
}

console.log(products)
console.log(myProducts)
console.log(newArr)

reto 1

const products = [
    { title: "Pizza", price: 121, id: "馃崟" },
    { title: "Burger", price: 121, id: "馃崝" },
    { title: "Hot cakes", price: 121, id: "馃" },
  ];

  const productsPass = [...products];

  const myProducts = [];
  console.log("products", products);
  console.log("myProducts", myProducts);
  console.log("-".repeat(10));
  const productIndex = productsPass.findIndex(item => item.id === '馃崝');
  if (productIndex !== -1) {
      myProducts.push(productsPass[productIndex]);
      productsPass.splice(productIndex, 1);
  }
  console.log("products", products);
  console.log("myProducts", myProducts);
  console.log("myProductsPass", productsPass);
  console.log("-".repeat(10));

Creo que Map deber铆a llamarse godMap:

const products = [
    {title: "Pizza", price: 121, id: "馃崟"},  
    { name: "Burger", price: 121, id: '馃崝' },
    { name: "Hot cakes", price: 121, id: '馃' },
];

const productsV2 = products.filter(product => product.id !== '馃崝');
console.log('Original:',products);
console.log('V2:', productsV2);

const update = {
    id: "馃",
    changes: {
        price: 200,
        description: "delicious",
    },
}

const productsV3 = products.map(product => {
    if(product.id === update.id) return {...product,...update.changes};

    return product;
});
console.log('Original:',products);
console.log('newObject:',productsV3);

Les comparto mis soluciones de los retos:
#1

const foods = [
	{ title: "Pizza", price: 121, id: "馃崟" },
	{ title: "Burger", price: 121, id: "馃崝" },
	{ title: "Hot cakes", price: 121, id: "馃" },
];

const foodsV2 = foods.filter((food) => food.id !== "馃崝")

console.log("foods", foods);
console.log("foodsV2", foodsV2);

#2

const foods = [
    { title: "Pizza", price: 121, id: "馃崟" },
    { title: "Burger", price: 121, id: "馃崝" },
    { title: "Hot cakes", price: 121, id: "馃" },
  ];

const updateFood = {
    id: "馃",
    changes: {
        price: 200,
        description: 'delicioso'
    }
}

const updatedProducts = foods.map((food) => ({
	...food,
	...(food.id === updateFood.id && {
		...updateFood.changes,
	})
}));
console.log('foods', foods);
console.log('updatedProducts', updatedProducts);

鈥楲o hice como una especie de sistema de pedidos online鈥, obvio se debe hacer de otra forma, pero tiene que ver con el reto

const products = [
  { title: "pizza", price: 121, id: 'p1'},
  { title: "burguer", price: 121, id: 'b2' },
  { title: "hot cakes", price: 121, id: 'c3' },
  { title: "milkShake", price: 100, id: 's4' },
  { title: "Ribbs", price: 121, id: 'r5' },
];

const foodOrders = (id, ib, newOrder) => {
  const productIndex = products.findIndex((item) => item.id === id);
  const myProduct = { order_Ready: products[productIndex] };

  products.splice(productIndex, ib);
  newArray = [...products];

  newArray.push(newOrder)
  console.log(myProduct);
  console.log({ Original: products }, { Copia: newArray });
};
foodOrders("s4", 1, {not:'order'});
foodOrders("p1", 1, { not: "order" });
foodOrders("r5", 1, { not: "order" });
foodOrders("b2", 1, { not: "order" });
foodOrders("c3", 1, {esta:'es la copia'});