Following are some of the ways to watch changes in javascript variables

1)Using Proxy : In JavaScript, you can use the `Proxy` object to monitor variable changes. The `Proxy` object allows you to intercept and customize operations performed on an object, including getting and setting properties. Here's an example of using a `Proxy` to monitor changes to a variable: 

// Variable to be monitored
let variable = 10;

// Handler for the proxy
const variableHandler = {
  set(target, property, value) {
    console.log(`Variable "${property}" changed from ${target[property]} to ${value}`);
    target[property] = value;
    return true;
  },
};

// Create a proxy for the variable
const monitoredVariable = new Proxy({ value: variable }, variableHandler);

// Access the variable through the proxy
console.log(monitoredVariable.value); // Output: 10

// Modify the variable through the proxy
monitoredVariable.value = 20; // Output: Variable "value" changed from 10 to 20

// Access the variable directly
console.log(variable); // Output: 20
In this example, we have a variable named `variable` with an initial value of 10. We define a `variableHandler` object that contains a `set` trap, which is called when a property of the proxy object is set. Next, we create a proxy object `monitoredVariable` using the `Proxy` constructor. The proxy wraps the original variable and applies the `variableHandler` on any property set operations. When we access `monitoredVariable.value`, it returns the initial value of 10. However, when we modify `monitoredVariable.value` to 20, the `set` trap of the `variableHandler` is triggered. It logs the change to the console and updates the original `variable` with the new value. Finally, when we access `variable` directly, it reflects the updated value of 20. By using a `Proxy` object, you can monitor and customize property assignments, enabling you to track changes to variables or objects in JavaScript. 2. Using Object.defineProperty : You can create a custom function that uses a combination of object getters and setters to achieve a similar effect. Here's an example of how you can watch variable changes using a custom function: 

function watchVariable(obj, propName, callback) {
  let value = obj[propName];

  Object.defineProperty(obj, propName, {
    get() {
      return value;
    },
    set(newValue) {
      if (newValue !== value) {
        const oldValue = value;
        value = newValue;
        callback(newValue, oldValue);
      }
    },
  });
}

// Example usage
const data = {
  variable: 10,
};

watchVariable(data, 'variable', (newValue, oldValue) => {
  console.log(`Variable changed from ${oldValue} to ${newValue}`);
});

data.variable = 20;
// Output: Variable changed from 10 to 20

data.variable = 20; // No output, value didn't change
In this example, the `watchVariable` function takes three parameters: `obj` (the object containing the variable), `propName` (the name of the variable to watch), and `callback` (a function to be called when the variable changes). Within `watchVariable`, we store the initial value of the variable in the `value` variable using `let`. Then, we define a new property on the object using `Object.defineProperty`, which allows us to intercept get and set operations. The `get` function simply returns the current value of the variable. The `set` function is triggered whenever the variable is assigned a new value. It compares the new value with the current value and calls the `callback` function if the value has changed, passing both the new and old values as arguments. In the example usage, we create an object `data` with a `variable` property. We watch changes to this property by calling `watchVariable` and passing the object, property name, and a callback function that logs the change to the console. When we update `data.variable` to 20, the callback function is triggered, and the change is logged. However, when we assign the same value of 20 again, the callback is not triggered because the value remains the same. By using this custom function, you can effectively watch for changes to variables in JavaScript and perform actions whenever those changes occur.