Immutable add, edit, delete operations

Immutability with rest spread operator

let items = [];

// Add item to the beginning of items array using rest operator
const addItemToStart = (newItem) => {
  items = [newItem, ...items];
}

// Add item to the end of items array using rest operator
const addItemToEnd = (newItem) => {
  items = [...items, newItem];
}

// Edit item using .map method, if id matches, use rest operator to override
// item properties with updatedItem, otherwise return item as is
const editItem = (updatedItem) => {
  items = items.map((item) => {
    if (updatedItem.id === item.id) {
      return {
        ...item,
        ...updatedItem
      }
    }

    return item;
  })
}

// Delete item using .filter method, if id matches, delete it from items array
const deleteItem = (idToRemove) => {
  items = items.filter((item) => item.id !== idToRemove);
}

Summary

• Rest spread operator is helpful when it comes to working with arrays and objects.
• Add, edit, delete functions can be used on any object structure and should work well with the array of those objects.