So, in the last video, we built this refreshDOM function so that we could easily call it and just update the entire DOM with the current data. But we're doing that manually, now we want to automatically call it when the data changes. So we want to observe changes to the data and then call this refreshDOM function. So this whole topic is going to be on observability, which is a fancy term that I'm not even going to deal with defining and diving into, I'm just going to show you how it works because it really is self-explanatory. So in JavaScript, observing used to be kind of a difficult thing to observe changes to a data object or to any object. But they added this API called Proxy.

a data object or to any object. But they added this API called Proxy. So there's a new offering in all modern browsers called Proxy that allows you to wrap a JavaScript object and observe changes to it. So let's demonstrate. It's very simple. I was intimidated by proxies before I dug into them, but they're actually it's like a pleasant surprise. They're just really simple. So here we have data, right?

They're just really simple. So here we have data, right? Our basic data object with count and zero. Let's create a proxy. Let proxy equals new Proxy. So proxy is a class and it accepts two arguments. The first one is the data that's going to be underneath it. And the next one is your traps. So what do I mean by traps? Well, I'll just show you.

So what do I mean by traps? Well, I'll just show you. So we'll create a get trap and we'll say get accepts, it accepts two arguments target, which is the original data object and then key, which is the key of the data object the user is trying to access. And now we have a callback that will run when the user tries to access a property on that object. So let's say console.log, oops, console.log, getting, okay. And then after that, we actually have to do the getting. So we'll return target[key], okay.

And then after that, we actually have to do the getting. So we'll return targetKey, okay. Now let's try it out. proxy.count. And then it says getting and then actually gets it. And if we do data.count, it still just gets the piece of data. So you can see how it kind of wraps up. It's like a decorator. It wraps up something underneath it. It's transparent.

It wraps up something underneath it. It's transparent. So you can use proxy the same way you can use data, but it allows you to hook in to certain actions on the target object. So we just demonstrated get, let's demonstrate set. So that's get, this will be set. And now we'll console.log, setting, and we'll actually do the setting now we'll say targetKey is equal to now we actually need a third parameter here, the value that you're setting is equal to value. Okay, and now if we do proxy.count, we should still get getting.

setting is equal to value. Okay, and now if we do proxy.count, we should still get getting. But if we do proxy.count equals 5 or 4, hit enter, it says setting 4, and now the underlying data object has actually been changed, but we hooked into the setting and we hooked into the getting, okay. So that is proxies in a nutshell. Hopefully that was clear enough for you. And hopefully you saw how we can use these traps to do the automatic refreshing. So it's pretty simple. Let's create a, let's, let's call this rawDOM.

So it's pretty simple. Let's create a, let's, let's call this rawDOM. So raw, sorry, rawData, rawData. Now we'll create data and we'll set it to observe(rawData). So we'll create this little observe function that wraps data inside a proxy. So function observe, and then observe is going to pull in data, we'll just say data. And then here, we're going to return our new Proxy that accepts the data as the first parameter. And now we can define our traps. All we need is a set trap. And the arguments are target, key, and value, just like we saw before in the devTools.

All we need is a set trap. And the arguments are targetKey and value, just like we saw before in the dev tools. Okay. And now we can hook into the setting. So first, let's actually do the setting. targetKey equals value. Okay. And now here is our hook, refreshDOM. So now every time you manually update data, every time data is updated from anywhere, it is going to hit this trap, call refreshDOM, rewalk through the DOM and update it.

So now every time you manually update data, every time data is updated from anywhere, it is going to hit this trap, call refresh, rewalk through the DOM and update it. So this is our reactivity core. So check it out. We're going to refresh. And now we can say data.count equals 4, and check it out. This is kind of a magical moment. This is the moment where everything just started to come together. We're not finished yet. But this is the moment where hopefully you just tasted it, where you just saw, oh, wow,