Ways to check in real time if an object has been changed

Question

I was looking for a way to check if an object was altered.

I did it in "gambiarra" mode using setInterval to keep checking all the time if it was changed, but I don’t know if it would be a good way to check.

How can I check if the object has been changed in a simpler or more efficient way?

let obj = {
  item:"valor"
}

function ObjectListener(object, func){
  let savedObject = JSON.stringify(object);
  let listener = setInterval(onChange, 0);
  function onChange(){
    if(savedObject !== JSON.stringify(object)){
      savedObject = JSON.stringify(object)
      func();
      clearInterval(listener);
      listener = setInterval(onChange, 0);
    }
  }
}

new ObjectListener(obj, () => console.log("Alterado"));

<h3>Digite um valor e clique em alterar</h3>
<input id="input">
<button onclick="obj.item = document.getElementById('input').value">Alterar</button>

Answer 1

You can use a Proxy, that according to the documentation:

is used to define custom behavior for fundamental Operations (e.g. Property lookup, assignment, enumeration, Function Invocation, etc)

That is, it is used to define a custom behavior for some fundamental operations, among them the attribution of a value.

In this case, to assign a value to the object, just define in the method set a custom behavior for when a property is changed:

let obj = {
  item:"valor"
}

obj = new Proxy(obj, {
  set: function (target, chave, valor) {
      console.log(`${chave} alterado para: ${valor}`);
      target[chave] = valor;
      return true;
  }
});

<h3>Digite um valor e clique em alterar</h3>
<input id="input">
<button onclick="obj.item = document.getElementById('input').value">Alterar</button>

According to the documentation, most browsers already support this feature (with the exception of IE).