Examples: Using Spread and Rest operators for immutable data manipulation

immutable-data.ts

initialPayload = {
  brands: ['BMW', 'Cheverolet', 'Dodge', 'Ford', 'Jeep'],
  cars: [
    {
      'make': 'BMW',
      'model': 'X5',
      'colors': ['red', 'black', 'white', 'silver']
    },
    {
      'make': 'Cheverolet',
      'model': 'Bolt',
      'colors': ['blue', 'black', 'white', 'silver']
    },
    {
      'make': 'Dodge',
      'model': 'Charger',
      'colors': ['orange', 'black', 'white', 'silver']
    },
    {
      'make': 'Ford',
      'model': 'Fiesta',
      'colors': ['red', 'green', 'white', 'silver']
    },
    {
      'make': 'Jeep',
      'model': 'Wrangler',
      'colors': ['rhino', 'black', 'white', 'silver']
    },
  ]
};

motorcycles: Object = { motorcycleBrands: ['Honda', 'Harley Davidson', 'Kawasaki'] };

copiedPayload: Object;

newBrand = 'Audi';

newCar: Object = {
  'make': 'Audi',
  'model': 'A6',
  'colors': ['red', 'black', 'white', 'silver']
};

brands: Object;

cars: Object;

newWithMotorcycles: Object;

newChangedToCarBrands: Object;

newBrandAdded: Object;

newCarAdded: Object;

newColorAdded: Object;

newJeepColorAdded: Object;

newFordColorAdded: Object;
    
/** rest operators */

// returning new filtered objects
const { brands, ...carsOnly} = this.initialPayload;
const { cars, ...brandsOnly} = this.initialPayload;
this.brands = brandsOnly;
this.cars = carsOnly;

/** spread operators */

// shallow copy
const copy = { ...this.initialPayload };
this.copiedPayload = copy;

// merge objects
const withMotorcyles = { ...this.initialPayload, ...this.motorcycles };
this.newWithMotorcycles = withMotorcyles;

// add new car object to nested cars array
// use object and array spread to add a new array item to an array nested in an object
const addNewCar = { ...this.initialPayload, cars: [ ...this.initialPayload.cars, this.newCar ] };
this.newCarAdded = addNewCar;

// add 'Audi' to brands
// use object and array spread to add a new array item to an array nested in an object
const addNewBrand = { ...this.initialPayload, brands: [ ...this.initialPayload.brands, this.newBrand ] };
this.newBrandAdded = addNewBrand;

/** using both spread and rest operators */

// change 'brands' property to 'carBrands'
// first, add new 'carBrands' object and copy the array from 'brands'
const addCarBrands = { ...this.initialPayload, carBrands: [ ...this.initialPayload.brands ] };
// second, pull out brands and assign the rest to allExceptBrands
const { brands: theBrands, ...allExceptBrands } = addCarBrands;
this.newChangedToCarBrands = allExceptBrands;

// add a new color to BMW colors array
const { cars: theCars } = this.initialPayload; // grab cars array
const [ bmw, ...withoutBmw ] = theCars; // bmw and the rest assignment
const bmwWithBlue =  { ...bmw, colors: [ ...bmw.colors, 'blue' ] }; // new bmw object with blue color addded
const newCars = [ bmwWithBlue, ...withoutBmw ]; // merge new cars array
const addNewColor = { ...this.initialPayload, cars: newCars }; // add new cars array
this.newColorAdded = addNewColor;

/** using built in Object and Array methods with spread and rest operators */

// add a new color to Jeep colors array
const carsObj = { ...theCars }; // transform cars array into object with object keys
const { '4': jeep, ...withoutJeep } = carsObj; // jeep and the rest assignment
const withoutJeepArray = Object.keys(withoutJeep).map(x => withoutJeep[x]); // turn back into array
const jeepWithArmyGreen =  { ...jeep, colors: [ ...jeep.colors, 'army green' ] }; // new jeep object with army green color addded
const carsWithNewJeepColor = [ ...withoutJeepArray, jeepWithArmyGreen ]; // merge new cars array
const addNewJeepColor = { ...this.initialPayload, cars: carsWithNewJeepColor }; // add new cars array
this.newJeepColorAdded = addNewJeepColor;

// replace 'red' with 'saphire' in Ford Fiesta colors array
const fordArray = theCars.filter(x => x.make === 'Ford'); // array with ford car object
const withoutFordArray = theCars.filter(x => x.make !== 'Ford');
const { [0]: ford } = fordArray; // pull out ford object
const { colors } = ford; // pull out colors array
const withoutRed = colors.filter(x => x !== 'red'); // make new colors array without 'red'
const withNewSaphireColor = { ...ford, colors: ['saphire', ...withoutRed] }; // add new 'saphire' color
const carsWithNewFordColor = [ ...withoutFordArray, withNewSaphireColor ]; // merge new cars array
const addNewFordColor = { ...this.initialPayload, cars: carsWithNewFordColor }; // add new cars array
this.newFordColorAdded = addNewFordColor;