Thank you for bringing this to my notice. I found a workaround for this bug.
If there is a condition where you need to edit the content of the array, then you can do this.
e.g.
const cart = [{name: 'headphones', price: 2000}];
const newCart = cart.map(item => ({...item}));
newCart[0].name = 'Expensive Boat';
console.log(cart);
console.log(newCart);
Great introduction to pure functions! One thing to keep in mind when using the spread syntax is that you'll be copying the array's contents by their references, so you can still affect the output of other functions!
For example, we can sneakily remove the user's headphones and replace them with an expensive boat by modifying the product-object:
product.name = 'Expensive boat' product.price = 10000000 newCart // => [ { name: 'Expensive boat', price: 10000000 } ]This isn't typically a huge deal, but can definitely introduce subtle bugs sometimes. Libraries like ImmutableJS that use "persistent datastructures" avoids this problem, but is obviously less convenient.
ImmutableJS
Persistent data structure on Wikipedia