Immutable array

// Original items array

const items = [

  { id: "uuid-1", title: "Item 1" },

  { id: "uuid-2", title: "Item 2" },

  { id: "uuid-3", title: "Item 3" },

];

// Immutable Delete

const deleteId = "uuid-2";

const itemsAfterDelete = items.filter(item => item.id !== deleteId);

// Immutable Modify

const modifyId = "uuid-3";

const itemsAfterModify = itemsAfterDelete.map(item =>

  item.id === modifyId ? { ...item, title: "Modified Item 3" } : item

);

// Immutable Add

const newItem = { id: "uuid-4", title: "Item 4" };

const itemsAfterAdd = [...itemsAfterModify, newItem];

// Logging for demonstration

console.log(items); // Original items array remains unchanged

console.log(itemsAfterDelete); // Items after deletion

console.log(itemsAfterModify); // Items after modification

console.log(itemsAfterAdd); // Items after adding a new item 

destructuring Map

 // Initialize items as a Map

let items = new Map([

  ["uuid-1", { id: "uuid-1", title: "Item 1" }],

  ["uuid-2", { id: "uuid-2", title: "Item 2" }],

  ["uuid-3", { id: "uuid-3", title: "Item 3" }],

]);

// Delete item with id "uuid-2"

const deleteId = "uuid-2";

const deletedItem = items.get(deleteId); // Get the item to be

deleted (for logging)

items.delete(deleteId); // Delete the item from the Map

console.log(deletedItem); // Log the deleted item

console.log(Array.from(items)); // Convert Map to Array to log remaining items

// modify item with id "uuid-3"

const modifyId = "uuid-3";

const modifiedItem = items.get(modifyId); // Get the item to be modified (for logging)

items.set(modifyId, { ...modifiedItem, title: "Modified Item 3" });

// Modify the item in the Map

console.log(modifiedItem); // Log the modified item

console.log(Array.from(items)); // Convert Map to Array to log remaining items

// Add a new item

const newItem = { id: "uuid-4", title: "Item 4" }; // Create a new item

items.set(newItem.id, newItem); // Add the new item to the Map

console.log(Array.from(items)); // Convert Map to Array to log all items

// MAP IS IMMUTABLE

// Original items Map

const items = new Map([

  ["uuid-1", { id: "uuid-1", title: "Item 1" }],

  ["uuid-2", { id: "uuid-2", title: "Item 2" }],

  ["uuid-3", { id: "uuid-3", title: "Item 3" }],

]);

// Immutable Delete

const deleteId = "uuid-2";

const itemsAfterDelete = new Map([...items].filter(([key, _]) => key !== deleteId));

// Immutable Modify

const modifyId = "uuid-3";

const modifiedItem = { ...items.get(modifyId), title: "Modified Item 3" };

const itemsAfterModify = new Map([...itemsAfterDelete]

.map(([key, value]) => key === modifyId ? [key, modifiedItem] : [key, value]));

// Immutable Add

const newItem = { id: "uuid-4", title: "Item 4" };

const itemsAfterAdd = new Map([...itemsAfterModify, [newItem.id, newItem]]);

// Logging for demonstration

console.log(Array.from(items)); // Original items Map remains unchanged

console.log(Array.from(itemsAfterDelete)); // Items after deletion

console.log(Array.from(itemsAfterModify)); // Items after modification

console.log(Array.from(itemsAfterAdd)); // Items after adding a new item

Destructuring Object

let items = {

  "uuid-1": { id: "uuid-1", title: "Item 1" },

  "uuid-2": { id: "uuid-2", title: "Item 2" },

  "uuid-3": { id: "uuid-3", title: "Item 3" },

};

// Delete item with id "uuid-2"

const deleteId = "uuid-2";

const { [deleteId]: deletedItem, ...remainingItems } = items;

items = remainingItems; // Update items to exclude the deleted item

console.log(deletedItem); // Log the deleted item

console.log(items); // Log the remaining items

// modify item with id "uuid-3"

const modifieId = "uuid-3";

const updatedItem = { ...items[modifieId], title: "New item 3" };

items = { ...items, [modifieId]: updatedItem };

console.log(items);

// add new item

const newItem = { id: "uuid-4", title: "Item 4" };

items = { ...items, [newItem.id]: newItem };

console.log(items);

// if items is immutable

// Original items object

const items = {

  "uuid-1": { id: "uuid-1", title: "Item 1" },

  "uuid-2": { id: "uuid-2", title: "Item 2" },

  "uuid-3": { id: "uuid-3", title: "Item 3" },

};

// Immutable delete

const deleteId = "uuid-2";

const { [deleteId]: deletedItem, ...itemsAfterDelete } = items;

// Immutable modify

const modifyId = "uuid-3";

const itemsAfterModify = {

  ...itemsAfterDelete,

  [modifyId]: { ...itemsAfterDelete[modifyId], title: "New item 3" },

};

// Immutable add

const newItem = { id: "uuid-4", title: "Item 4" };

const itemsAfterAdd = { ...itemsAfterModify, [newItem.id]: newItem };

console.log(items); // Original items object remains unchanged

console.log(itemsAfterDelete); // Items after deletion

console.log(itemsAfterModify); // Items after modification

console.log(itemsAfterAdd); // Items after adding a new item