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