Detect object modifications with JavaScript Proxy

To illustrate now we have an object for our customers. How can we detect when a property modifications?

const consumer = {
  firstName: 'Chris',
  lastName: 'Bongers',
  age: 10,
};

Now the consumer modifications his age through the use of the next code.

consumer.age = 33;

Nonetheless, we need to log this modification to maintain monitor of particular modifications.

Utilizing JavaScript Proxy to detect object modifications

That is once more the place the Proxy object is useful.
As we realized within the earlier article, the Proxy object comes with a set handler (entice).

The set handler can cross us the next three parameters.

• object: The entire object we try to switch
• property: The property we try to switch
• worth: The brand new worth we try to set

Let’s create a proxy to our consumer object so we will connect a handler.

const handler = {
  set(goal, prop, worth) {
    // Our code
  },
};

const proxyUser = new Proxy(consumer, handler);

As for the code, we need to log which property is being modified, what the earlier worth was, and what the brand new worth shall be.

Then we have to be sure that we set the brand new worth.

The result’s the next perform.

const handler = {
  set(goal, prop, worth) {
    console.log(`modified ${prop} from ${goal[prop]} to ${worth}`);
    goal[prop] = worth;
  },
};

Let’s strive it out by modifying the age once more.

proxyUser.age = 33;

Now the console will present this modification and log modified age from 10 to 33.

Detecting extra Object properties

Generally we would push new properties to the item. Let’s have a look at how we will seize that.

proxyUser.e-mail = 'information@daily-dev-tips.com';

And once more, it will neatly log the change: modified e-mail from undefined to information@daily-dev-tips.com.

Nonetheless, there may be one small exception.

If now we have a sub-object or array in our important object, it will not work out of the field.

const consumer = {
  firstName: 'Chris',
  lastName: 'Bongers',
  age: 10,
  deal with: {
    postalCode: '1234AB',
  },
};

proxyUser.deal with.postalCode = '5678CD';

This now logs nothing new, however the property is modified!
And that is as a result of there may be now a deep proxy set.

To go browsing that degree, we will once more leverage the get handler and proxy every property to be a proxy itself 🤯.

const handler = {
  get(goal, key) {
    if (typeof goal[key] === 'object' && goal[key] !== null) {
      return new Proxy(goal[key], handler);
    }
    return goal[key];
  },
  set(goal, prop, worth) {
    console.log(`modified ${prop} from ${goal[prop]} to ${worth}`);
    goal[prop] = worth;
  },
};

And now, after we rerun our code, we see the log seem as modified postalCode from 1234AB to 5678CD.

I added these examples to CodePen so you may strive them out your self.

Thanks for studying, and let’s join!

Thanks for studying my weblog. Be happy to subscribe to my e-mail publication and join on Fb or Twitter