How do I make this object immutable

Question

I am working with this code below

const recipes = {
  recipe1: {
    title: "pancake",
    serving: 4,
    ingredients: ["flour", "egg", "milk", "vanilla", "baking Powder"],
  },
  recipe2: {
    title: "eggSalad",
    serving: 2,
    ingredients: ["egg", "mayo", "lettuce", "cucumber", "tomato"],
  },
  recipe3: {
    title: "omelette",
    serving: 4,
    ingredients: ["egg", "mushroom", "pepper", "salt", "tomato"],
  }
};

const arr1 = Object.assign({}, {...recipes})

Object.values(arr1).forEach(e => {
  console.log(e.title)
  console.log(e.serving)
  console.log(e.ingredients)

  e.title = "this has been mutated"
})

console.log(recipes)

I want to log each recipe, which I have done successfully. HOWEVER, I also don't want to mutate the object. I thought by using the Object.assign along with the ... / spread operator, it would sever ties with the original recipes object. But on the last console log, the original object is in fact mutated and logs each recipe title with 'this has been mutated'

I am very confused why this is happening, and furthermore, cannot find a solution in which I can copy the orginal array without mutating it.

I am sure I am doing something rather silly, but I want to maintain good practice of keeping things immutable, and I cannot get this to work!

Can anyone help, or even better, educate me where I am going wrong?

Thanks!

Answer 1

In order to create a "deep copy" of your nested objects, you have to create copies for every non-primitive value (plain object or array object) within.

Otherwise, the objects within will still be same objects in the original (even though you created a copy of their "container object").

In the case of your example data, you can do it using recursive spread syntax like in the example below where copy is created:

const recipes = {
  recipe1: {
    title: "pancake",
    serving: 4,
    ingredients: ["flour", "egg", "milk", "vanilla", "baking Powder"],
  },
  recipe2: {
    title: "eggSalad",
    serving: 2,
    ingredients: ["egg", "mayo", "lettuce", "cucumber", "tomato"],
  },
  recipe3: {
    title: "omelette",
    serving: 4,
    ingredients: ["egg", "mushroom", "pepper", "salt", "tomato"],
  }
};

const copy = Object.fromEntries([...Object.entries(recipes)].map(([name, recipe]) => [name, {
  ...recipe,
  ingredients: [...recipe.ingredients],
}]));

Object.values(copy).forEach(recipe => {
  console.log(recipe);
  recipe.title = "this has been mutated";
})

console.log(recipes);

In the case of data that can be directly serialized as JSON without a type coercion (like your example), you can also simply use:

const copy = JSON.parse(JSON.stringify(recipes));