ECMAScript 5 way of redefining a property on an object at runtime with an explicit get/set pair that would allow one to emit an event (e.g. think redux action) upon certain property changes

property_observer.js

var rob = { 
  orderid: 'ORDER123', 
  customerid: '7',
  customer: {
    firstname: 'Rob',
    lastname: 'Neville'
  },
  observed: false,
  orderlines: [ 
    { 
      lineid: 1, 
      productid: 'MODERNSCROLL',
      product: {
        vendorid: 'ROB'
      },
      qty: 1
    }, 
    { 
      lineid: 2, 
      productid: 'RECLINER', 
      product: {
        vendorid: 'IAN'
      },
      qty: 3 
    }
  ] 
};

function observeProperty(obj, key, parent_path, callbackFn) {
  console.log(key, obj);
  const hidden_key = `_${key}`;
  obj[hidden_key] = obj[key];
  delete obj[key];
  console.log(`defining ${obj}[${key}]`);
  Object.defineProperty(obj, key, {
    get: function() { return this[hidden_key]; },
    set: function(value) {
      if (this[hidden_key] !== value) {
        callbackFn(parent_path);
      }
      this[hidden_key] = value;
    }
  });
}

function observeProperties(obj, paths, event) {

  let observerHandler = function(path) {
    console.log(event, path);
  }

  obj._observerHandler = observerHandler;

  paths.forEach(path => {
    let object_path = path.split('.');
    let observing_object = obj;
    object_path.slice(0, -1).forEach(key => {
      observing_object = observing_object[key];
    });

    let observed_key = object_path[object_path.length - 1]

    observeProperty(observing_object, 
                    observed_key, 
                    path,
                    obj._observerHandler);
  });
}

probably need to check that obj[key] is a scalar, object or array and then for arrays, need a way of tracking changes to any element in the list.

might want to look at proxies too since that might be a good way to intercept array changes (changes in length and/or changes to elements in that array)