shallow-copy-problem.js

/*
   INCORRECT CHANGES (deep mutation)
*/

const animals = {
  zebra: {
    food: ['leaves', 'bark'],
    name: 'zebra'
  },
  panda: {
    food: [],
    name: 'panda'
  }
};

const copy = { ...animals }; 
copy.panda.food.push('leaves'); // bad

console.log(animals.panda.food); // ['leaves']
console.log(copy.panda.food);    // ['leaves']

/*
   CORRECT CHANGES (deep spread)
*/

const animals = {
  zebra: {
    food: ['leaves', 'bark'],
    name: 'zebra'
  },
  panda: {
    food: [],
    name: 'panda'
  }
};

const copy = {
  ...animals,
  panda: {
    ...animals.panda,
    food: [
       ...animals.panda.food,
      'leaves'
    ]
  }
};

console.log(animals.panda.food); // [ ]
console.log(copy.panda.food);    // ['leaves']