Detecting changes in a Javascript array using the Proxy object

Question

It is relatively trivial to watch for changes in an array in Javascript.

One method I use is like this:

// subscribe to add, update, delete, and splice changes Array.observe(viewHelpFiles, function(changes) {   // handle changes... in this case, we'll just log them    changes.forEach(function(change) {     console.log(Object.keys(change).reduce(function(p, c) {       if (c !== "object" && c in change) {         p.push(c + ": " + JSON.stringify(change[c]));       }       return p;     }, []).join(", "));   }); }); 

However, I have recently read that Array.observe is deprecated and we should use the proxy object instead.

How can we detect changes in an array the Proxy object? I am unable to find any examples, anyone interested in elaborating?

Answer 1

From what I can read from the MDN page, you can create a general handler where you can handle all the changes to any object.

In a sense, you write an interceptor, that will intervene each time you get a value from the array or set a value. You can then write your own logic to follow the changes.

var arrayChangeHandler = {    get: function(target, property) {      console.log('getting ' + property + ' for ' + target);      // property is index in this case      return target[property];    },    set: function(target, property, value, receiver) {      console.log('setting ' + property + ' for ' + target + ' with value ' + value);      target[property] = value;      // you have to return true to accept the changes      return true;    }  };    var originalArray = [];  var proxyToArray = new Proxy( originalArray, arrayChangeHandler );    proxyToArray.push('Test');  console.log(proxyToArray[0]);    // pushing to the original array won't go through the proxy methods  originalArray.push('test2');    // the will however contain the same data,   // as the items get added to the referenced array  console.log('Both proxy and original array have the same content? '     + (proxyToArray.join(',') === originalArray.join(',')));    // expect false here, as strict equality is incorrect  console.log('They strict equal to eachother? ' + (proxyToArray === originalArray));

Which then outputs:

getting push for  getting length for  setting 0 for  with value Test  setting length for Test with value 1 getting 0 for Test Test 

The caveat for the proxy, is that everything which is defined on an object, will be intercepted, which can be observed when using the push method.

The original object that will be proxied doesn't mutate, and changes done to the original object will not be caught by the proxy.