Listening for variable changes in JavaScript

Question

Is it possible to have an event in JS that fires when the value of a certain variable changes? JQuery is accepted.

Hanfurd

@BenjaminGruenbaum probably you want to say MutableObserver (for DOM). Object is only for JS objects from what I remember. – Mariandi

@Mariandi this question is about variables - not the DOM. – Godevil

@BenjaminGruenbaum according to developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… Object.observe is obsolete or deprecated. The recommended replacement (per that same page) is the Proxy object. – Runyon

The question only asking about variable, yet all of the answers here refer to property. I wonder if we can listen for local variable changes though. – Ovoviviparous

Answer 1

This question was originally posted in 2009 and most of the existing answers are either outdated, ineffective, or require the inclusion of large bloated libraries:

• Object.watch and Object.observe are both deprecated and should not be used.
• onPropertyChange is a DOM element event handler that only works in some versions of IE.
• Object.defineProperty allows you to make an object property immutable, which would allow you to detect attempted changes, but it would also block any changes.
• Defining setters and getters works, but it requires a lot of setup code and it does not work well when you need to delete or create new properties.

As of 2018, you can now use the Proxy object to monitor (and intercept) changes made to an object. It is purpose built for what the OP is trying to do. Here's a basic example:

var targetObj = {};
var targetProxy = new Proxy(targetObj, {
  set: function (target, key, value) {
      console.log(`${key} set to ${value}`);
      target[key] = value;
      return true;
  }
});

targetProxy.hello_world = "test"; // console: 'hello_world set to test'

The only drawbacks of the Proxy object are:

1. The Proxy object is not available in older browsers (such as IE11) and the polyfill cannot fully replicate Proxy functionality.
2. Proxy objects do not always behave as expected with special objects (e.g., Date) -- the Proxy object is best paired with plain Objects or Arrays.

If you need to observe changes made to a nested object, then you need to use a specialized library such as Observable Slim (which I have published). It works like this:

var test = {testing:{}};
var p = ObservableSlim.create(test, true, function(changes) {
    console.log(JSON.stringify(changes));
});

p.testing.blah = 42; // console:  [{"type":"add","target":{"blah":42},"property":"blah","newValue":42,"currentPath":"testing.blah",jsonPointer:"/testing/blah","proxy":{"blah":42}}]

 

Passus

I'll add also another drawback, you don't actually watch changes on the target object but only on proxy object. In some cases, you just want to know when a property change on the target object (i.e. target.hello_world = "test") – Ariannearianrhod

you don't actually watch changes on the target object but only on proxy object -- that's not quite accurate. The Proxy object is not modified -- it doesn't have it's own copy of the target. you just want to know when a property change on the target object -- you can accomplish that with a Proxy, that's one of the primary use cases for proxies. – Passus

so when i call target.hello_world="test" my set function defined inside targetProxy will be called? – Ariannearianrhod

No, because you're modifying the target directly. If you want to observe the modification to target, then you have to do it through a proxy. However proxy.hello_world = "test" does not mean that you are modifying the proxy, the proxy remains unchanged, target gets modified (if your set handler is configured to do so). It sounds like your point is that you cannot directly observe target.hello_world = "test". That is true. Plain variable assignments do not emit any kind of event. That's why we have to use tools like those described in the answers to this question. – Passus

Thank you Elliot B. It sounds like your point is that you cannot directly observe target.hello_world = "test". That is true. that's exactly my point. In my case I have an object created somewhere else and been updated by some other code... a proxy, in this case, is not useful since the changes will be done on the target. – Ariannearianrhod

@Ariannearianrhod I guess what Elliot is trying to say is that you can use the proxy instead of the actual object, meaning you can pass the proxy around like if it was your object and make the other parts of the app interact with your proxy. Changes on the proxy will be reflected on the actual object. – Hebraist

yeah, the point is that I don't have control over the creation of the object that I want to observe. – Ariannearianrhod

Another drawback of the Proxy object is that it does not behave well with classes containing private members (with the hash, like #member), because Proxy does not see them. So at some point your proxified instance will throw an error. – Saporific

Object.defineProperty works just perfectly. Look at my answer below. – Edna

Answer 2

Yes, this is now completely possible!

I know this is an old thread but now this effect is possible using accessors (getters and setters): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters

You can define an object like this, in which aInternal represents the field a:

x = {
  aInternal: 10,
  aListener: function(val) {},
  set a(val) {
    this.aInternal = val;
    this.aListener(val);
  },
  get a() {
    return this.aInternal;
  },
  registerListener: function(listener) {
    this.aListener = listener;
  }
}

Then you can register a listener using the following:

x.registerListener(function(val) {
  alert("Someone changed the value of x.a to " + val);
});

So whenever anything changes the value of x.a, the listener function will be fired. Running the following line will bring the alert popup:

x.a = 42;

See an example here: https://jsfiddle.net/5o1wf1bn/1/

You can also user an array of listeners instead of a single listener slot, but I wanted to give you the simplest possible example.

Underwood

What about a way to detect when a new property has been added to an object, or one has been removed? – Mythopoeia

This is an old answer, but I wanted to add that this works well for array values as well as long as you set the value of the array instead of pushing to it. – Starvation

@Underwood Nice Solution! How would go about registering multiple listeners to the same variable? – Sirdar

You simply need to have an array of listeners instead of a single one and then instead of just calling this.aListener(val), you would have to loop through all listener functions and call each one passing val. Typically, the method is called addListener instead of registerListener. – Underwood

This is basically just an analog to INotifyPropertyChanged in C# right? – Disjunction

Answer 3

Proxy

https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Proxy

const target = {
  message1: "hello",
  message2: "everyone",
};

const proxy = new Proxy(target, {
  get(target, prop, receiver) {
    if (prop === "message2") {
      return "world";
    }
    return Reflect.get(...arguments);
  },
});

console.log(proxy.message1); // hello
console.log(proxy.message2); // world

Prototype

Using Prototype: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

// Console
function print(t) {
  var c = document.getElementById('console');
  c.innerHTML = c.innerHTML + '<br />' + t;
}

// Demo
var myVar = 123;

Object.defineProperty(this, 'varWatch', {
  get: function () { return myVar; },
  set: function (v) {
    myVar = v;
    print('Value changed! New value: ' + v);
  }
});

print(varWatch);
varWatch = 456;
print(varWatch);

<pre id="console">
</pre>

Other example

// Console
function print(t) {
  var c = document.getElementById('console');
  c.innerHTML = c.innerHTML + '<br />' + t;
}

// Demo
var varw = (function (context) {
  /**
   * Declare a new variable.
   *
   * @param {string} Variable name.
   * @param {any | undefined} varValue Default/Initial value.
   * You can use an object reference for example.
   */
  return function (varName, varValue) {
    var value = varValue;
  
    Object.defineProperty(context, varName, {
      get: function () { return value; },
      set: function (v) {
        value = v;
        print('Value changed! New value: ' + value);
      }
    });
  };
})(window);

varw('varWatch'); // Declare without initial value
print(varWatch);
varWatch = 456;
print(varWatch);

print('---');

varw('otherVarWatch', 123); // Declare with initial value
print(otherVarWatch);
otherVarWatch = 789;
print(otherVarWatch);

<pre id="console">
</pre>

Reiko

The second example is a bit misleading, varw requires 2 arguments but part of your example shows the function being called with just the value parameter. – Bola

@HlawulekaMAS post updated with some comments. – Reiko

best answer for pure js – Doom

Answer 4

No.

But, if it's really that important, you have 2 options (first is tested, second isn't):

First, use setters and getters, like so:

var myobj = {a : 1};

function create_gets_sets(obj) { // make this a framework/global function
    var proxy = {}
    for ( var i in obj ) {
        if (obj.hasOwnProperty(i)) {
            var k = i;
            proxy["set_"+i] = function (val) { this[k] = val; };
            proxy["get_"+i] = function ()    { return this[k]; };
        }
    }
    for (var i in proxy) {
        if (proxy.hasOwnProperty(i)) {
            obj[i] = proxy[i];
        }
    }
}

create_gets_sets(myobj);

then you can do something like:

function listen_to(obj, prop, handler) {
    var current_setter = obj["set_" + prop];
    var old_val = obj["get_" + prop]();
    obj["set_" + prop] = function(val) { current_setter.apply(obj, [old_val, val]); handler(val));
}

then set the listener like:

listen_to(myobj, "a", function(oldval, newval) {
    alert("old : " + oldval + " new : " + newval);
}

Second, you could put a watch on the value:

Given myobj above, with 'a' on it:

function watch(obj, prop, handler) { // make this a framework/global function
    var currval = obj[prop];
    function callback() {
        if (obj[prop] != currval) {
            var temp = currval;
            currval = obj[prop];
            handler(temp, currval);
        }
    }
    return callback;
}

var myhandler = function (oldval, newval) {
    //do something
};

var intervalH = setInterval(watch(myobj, "a", myhandler), 100);

myobj.set_a(2);

Levorotation

"watching" is not actually detecting a change. This is not event based, and would certainly slow down the entire app very very soon. These approaches IMHO should never be part of a real project. – Cammiecammy

Answer 5

Sorry to bring up an old thread, but here is a little manual for those who (like me!) don't see how Eli Grey's example works:

var test = new Object();
test.watch("elem", function(prop,oldval,newval){
    //Your code
    return newval;
});

Hope this can help someone

Kapellmeister

Per mozilla developer network, this is not recommended. Object.prototype.watch() was intended for testing only and should not be used in production code. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – Voorhis

@PaulMcClean this answer was in Response to Eli Grey's answer which contained a Polyfill. gist.github.com/eligrey/384583 – Aardvark

watch has been deprecated by Mozilla. This answer could be misleading. – Aleut

Answer 6

As Luke Schafer's answer (note: this refers to his original post; but the whole point here remains valid after the edit), I would also suggest a pair of Get/Set methods to access your value.

However I would suggest some modifications (and that's why I'm posting...).

A problem with that code is that the field a of the object myobj is directly accessible, so it's possible to access it / change its value without triggering the listeners:

var myobj = { a : 5, get_a : function() { return this.a;}, set_a : function(val) { this.a = val; }}
/* add listeners ... */
myobj.a = 10; // no listeners called!

Encapsulation

So, to guarantee that the listeners are actually called, we would have to prohibit that direct access to the field a. How to do so? Use a closure!

var myobj = (function() { // Anonymous function to create scope.

    var a = 5;            // 'a' is local to this function
                          // and cannot be directly accessed from outside
                          // this anonymous function's scope

    return {
        get_a : function() { return a; },   // These functions are closures:
        set_a : function(val) { a = val; }  // they keep reference to
                                            // something ('a') that was on scope
                                            // where they were defined
    };
})();

Now you can use the same method to create and add the listeners as Luke proposed, but you can rest assured that there's no possible way to read from or write to a going unnoticed!

Adding encapsulated fields programmatically

Still on Luke's track, I propose now a simple way to add encapsulated fields and the respective getters/setters to objects by the means of a simple function call.

Note that this will only work properly with value types. For this to work with reference types, some kind of deep copy would have to be implemented (see this one, for instance).

function addProperty(obj, name, initial) {
    var field = initial;
    obj["get_" + name] = function() { return field; }
    obj["set_" + name] = function(val) { field = val; }
}

This works the same as before: we create a local variable on a function, and then we create a closure.

How to use it? Simple:

var myobj = {};
addProperty(myobj, "total", 0);
window.alert(myobj.get_total() == 0);
myobj.set_total(10);
window.alert(myobj.get_total() == 10);

Washrag

+1 for encapsulation. That was my first thought, but I wanted the ability to add the create_gets_sets method eventually, and since it is indiscriminate, hiding the values isn't cool :) we can take it a step further and write some things to hide the values, but I think the code i've posted is confusing enough for most people... maybe if there's call for it... – Levorotation

Answer 7

Recently found myself with the same issue. Wanted to listen for on change of a variable and do some stuff when the variable changed.

Someone suggested a simple solution of setting the value using a setter.

Declaring a simple object that keeps the value of my variable here:

var variableObject = {
    value: false,
    set: function (value) {
        this.value = value;
        this.getOnChange();
    }
}

The object contains a set method via which I can change the value. But it also calls a getOnChange() method in there. Will define it now.

variableObject.getOnChange = function() {
    if(this.value) {
        // do some stuff
    }
}

Now whenever I do variableObject.set(true), the getOnChange method fires, and if the value was set as desired (in my case: true), the if block also executes.

This is the simplest way I found to do this stuff.

Wotton

Answer 8

If you're using jQuery {UI} (which everyone should be using :-) ), you can use .change() with a hidden <input/> element.

Rocco

I don't quite understand. How can you attach a variable to a hidden <input/> element? – Burchfield

I think Chuck is suggesting that you can set the value of the input using jquery and then and a .change() event listener. If you update the input's value with .val() then the .change() event callback will fire. – Tatary

<input type="hidden" value="" id="thisOne" /> and with jQuery $("#thisOne").change(function() { do stuff here }); and $("#thisOne").val(myVariableWhichIsNew); and then the .change() will fire. – Whiz

The keypress + mousedown events will also work if you're using an input field – Madlin

Was just thinking this could work and was about to add an answer like this, glad to see someone else has already tested it. – Hawking

This is the best solution in my books. Simple, easy. Instead of changing the variable in your code, e.g. var1 = 'new value';, you'll instead set the value of this hidden input, then add a listener to change the variable. $("#val1").on('change', function(){ val1 = this.val(); ... do the stuff that you wanted to do when val1 changed... }); $("#val1").val('new value'); – Tarrah

Sorry for the double comment... ran out of the 5 min limit for edits. If you wanted to have a pure javascript solution, you could add this input to the DOM using JS: $(document).ready(function() { $('body').append('<input type="hidden" id="val1" value="' + val1 + '" />'); }); You would, of course, have to run the "change" listener after this, and this might not work if you're relying on the change listener working before the DOM loads (that warning probably goes for this whole solution). – Tarrah

A getter and setter would be way easier and probably faster. – Armbruster

For anyone who is having the same problem as me,if the change event doesnt trigger try $("#thisOne").val(myVariableWhichIsNew).trigger('change') .Hope this helps – Scrutable

Answer 9

AngularJS (I know this is not JQuery, but that might help. [Pure JS is good in theory only]):

$scope.$watch('data', function(newValue) { ..

where "data" is name of your variable in the scope.

There is a link to doc.

Christianson

Unfortunately it forces you to bind variable to scope – Counterespionage

it is fired only when $scope.$apply() is run – Realism

Answer 10

For those tuning in a couple years later:

A solution for most browsers (and IE6+) is available that uses the onpropertychange event and the newer spec defineProperty. The slight catch is that you'll need to make your variable a dom object.

Full details:

http://johndyer.name/native-browser-get-set-properties-in-javascript/

Offcenter

Answer 11

Easiest way I have found, starting from this answer:

// variable holding your data
const state = {
  count: null,
  update() {
    console.log(`this gets called and your value is ${this.pageNumber}`);
  },
  get pageNumber() {
    return this.count;
  },
  set pageNumber(pageNumber) {
    this.count = pageNumber;
    // here you call the code you need
    this.update(this.count);
  }
};

And then:

state.pageNumber = 0;
// watch the console

state.pageNumber = 15;
// watch the console

Boyfriend

Answer 12

The functionality you're looking for can be achieved through the use of the "defineProperty()" method--which is only available to modern browsers:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

I've written a jQuery extension that has some similar functionality if you need more cross browser support:

https://github.com/jarederaj/jQueue

A small jQuery extension that handles queuing callbacks to the existence of a variable, object, or key. You can assign any number of callbacks to any number of data points that might be affected by processes running in the background. jQueue listens and waits for these data you specify to come into existence and then fires off the correct callback with its arguments.

Tatary

Answer 13

Not directly: you need a pair getter/setter with an "addListener/removeListener" interface of some sort... or an NPAPI plugin (but that's another story altogether).

Banerjee

Answer 14

A rather simple and simplistic solution is to just use a function call to set the value of the global variable, and never set its value directly. This way you have total control:

var globalVar;

function setGlobalVar(value) {
    globalVar = value;
    console.log("Value of globalVar set to: " + globalVar);
    //Whatever else
}

There is no way to enforce this, it just requires programming discipline... though you can use grep (or something similar) to check that nowhere does your code directly set the value of globalVar.

Or you could encapsulate it in an object and user getter and setter methods... just a thought.

Orndorff

For a variable that is not a property of an object one can access -- as is the case with variables declared with var in ES6 modules -- this is the only solution. – Uncovered

Answer 15

With the help of getter and setter, you can define a JavaScript class that does such a thing.

First, we define our class called MonitoredVariable:

class MonitoredVariable {
  constructor(initialValue) {
    this._innerValue = initialValue;
    this.beforeSet = (newValue, oldValue) => {};
    this.beforeChange = (newValue, oldValue) => {};
    this.afterChange = (newValue, oldValue) => {};
    this.afterSet = (newValue, oldValue) => {};
  }

  set val(newValue) {
    const oldValue = this._innerValue;
    // newValue, oldValue may be the same
    this.beforeSet(newValue, oldValue);
    if (oldValue !== newValue) {
      this.beforeChange(newValue, oldValue);
      this._innerValue = newValue;
      this.afterChange(newValue, oldValue);
    }
    // newValue, oldValue may be the same
    this.afterSet(newValue, oldValue);
  }

  get val() {
    return this._innerValue;
  }
}

Assume that we want to listen for money changes, let's create an instance of MonitoredVariable with initial money 0:

const money = new MonitoredVariable(0);

Then we could get or set its value using money.val:

console.log(money.val); // Get its value
money.val = 2; // Set its value

Since we have not defined any listeners for it, nothing special happens after money.val changes to 2.

Now let's define some listeners. We have four listeners available: beforeSet, beforeChange, afterChange, afterSet. The following will happen sequentially when you use money.val = newValue to change variable's value:

1. money.beforeSet(newValue, oldValue);
2. money.beforeChange(newValue, oldValue); (Will be skipped if its value not changed)
3. money.val = newValue;
4. money.afterChange(newValue, oldValue); (Will be skipped if its value not changed)
5. money.afterSet(newValue, oldValue);

Now we define afterChange listener which be triggered only after money.val has changed (while afterSet will be triggered even if the new value is the same as the old one):

money.afterChange = (newValue, oldValue) => {
  console.log(`Money has been changed from ${oldValue} to ${newValue}`);
};

Now set a new value 3 and see what happens:

money.val = 3;

You will see the following in the console:

Money has been changed from 2 to 3

For full code, see https://gist.github.com/yusanshi/65745acd23c8587236c50e54f25731ab.

Cryptograph

awsome ... I want to expand on this code example just reaching out to know what license is code snippet. +1 for making it reusable through class and before and after handlers – Stanchion

Answer 16

In my case, I was trying to find out if any library I was including in my project was redefining my window.player. So, at the begining of my code, I just did:

Object.defineProperty(window, 'player', {
  get: () => this._player,
  set: v => {
    console.log('window.player has been redefined!');
    this._player = v;
  }
});

Kwabena

Answer 17

Based On akira's answer I added that you can manipulate the dom through the listerner.

https://jsfiddle.net/2zcr0Lnh/2/

javascript:

x = {
  aInternal: 10,
  aListener: function(val) {},
  set a(val) {
    this.aInternal = val;
    this.aListener(val);
  },
  get a() {
    return this.aInternal;
  },
  registerListener: function(listener) {
    this.aListener = listener;
  }
}

x.registerListener(function(val) {
document.getElementById('showNumber').innerHTML = val;
});


x.a = 50;

function onClick(){
x.a = x.a + 1;
}

html:

<div id="showNumber">
 
</div>


<button onclick="onClick()">
click me to rerender
</button>

The registerListener method is fired when the variable x.a changes.

Saharan

Answer 18

This is an old great question, has more than 12 years. Also, there are many ways to solve it. However, most of then are complicated or using old JS concepts we are in 2022 and we can use ES6 to improve our code.

I will implemented two main solutions that I constantly use.

Simple variable

If we have a simple variable and we don't care about reutilization then we can declare our variable as an object. We define a set and get methods and a listener attribute to handle the "change" event.

const $countBtn = document.getElementById('counter')
const $output = document.getElementById('output')

const counter = {
  v: 0,
  listener: undefined,
  set value(v) {
    this.v = v
    if (this.listener) this.listener(v)
  },
  get value() { return this.v },
  count() { this.value++ },
  registerListener(callback) {
    this.listener = callback
  },
}

const countOnClick = () => { counter.count() }

$countBtn.onclick = countOnClick

counter.registerListener(v => {
  $output.textContent = v
})


counter.value = 50

#output {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

<button id="counter">Count</button>
<div id="output"></div>

Advanced Class for reusability

If we will have multiple variables and we need to monitor them, we can create a class and then apply it to our variables. I recommend to add two listeners one beforeChange and afterChange this will give you flexibility to use the variable in different process.

class ObservableObject {
  constructor(v) {
    this.v = v ?? 0
    this.on = {
      beforeChange(newValue, oldValue) {},
      afterChange(newValue, oldValue) {},
    }
  }

  set value(newValue) {
    const oldValue = this.v
    // newValue, oldValue are the same
    if (oldValue === newValue) return

    this.on.beforeChange(newValue, oldValue)
    this.v = newValue
    this.on.afterChange(newValue, oldValue)
  }

  get value() { return this.v }
}

const $countABtn = document.getElementById('counter-a')
const $countBBtn = document.getElementById('counter-b')
const $outputA = document.getElementById('output-a')
const $outputB = document.getElementById('output-b')

const counterA = new ObservableObject()
const counterB = new ObservableObject()

const countOnClick = counter => { counter.value++ }

const onChange = (v, output) => { output.textContent = v }

$countABtn.onclick = () => { countOnClick(counterA) }
$countBBtn.onclick = () => { countOnClick(counterB) }

counterA.on.afterChange = v => { onChange(v, $outputA) }
counterB.on.afterChange = v => { onChange(v, $outputB) }

counterA.value = 50
counterB.value = 20

.wrapper {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    width: 100vw
}

.item {
  width: 50%
}

.output {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}

<div class="wrapper">
  <div class="item">
    <button id="counter-a">Count A</button>
    <div id="output-a" class="output"></div>
  </div>
  <div class="item">
    <button id="counter-b">Count B</button>
    <div id="output-b" class="output"></div>
  </div>
</div>

Anacardiaceous

Answer 19

//ex:
/*
var x1 = {currentStatus:undefined};
your need is x1.currentStatus value is change trigger event ?
below the code is use try it.
*/
function statusChange(){
    console.log("x1.currentStatus_value_is_changed"+x1.eventCurrentStatus);
};

var x1 = {
    eventCurrentStatus:undefined,
    get currentStatus(){
        return this.eventCurrentStatus;
    },
    set currentStatus(val){
        this.eventCurrentStatus=val;
      //your function();
    }
};

or

/*  var x1 = {
eventCurrentStatus:undefined,
currentStatus : {
    get : function(){
        return Events.eventCurrentStatus
        },
    set : function(status){
        Events.eventCurrentStatus=status;

    },
}*/
console.log("eventCurrentStatus = "+ x1.eventCurrentStatus);
x1.currentStatus="create"
console.log("eventCurrentStatus = "+ x1.eventCurrentStatus);
x1.currentStatus="edit"
console.log("eventCurrentStatus = "+ x1.eventCurrentStatus);
console.log("currentStatus = "+ x1.currentStatus);

or

/* global variable ku*/
    var jsVarEvents={};
    Object.defineProperty(window, "globalvar1", {//no i18n
        get: function() { return window.jsVarEvents.globalvarTemp},
        set: function(value) { window.window.jsVarEvents.globalvarTemp = value; }
    });
    console.log(globalvar1);
    globalvar1=1;
    console.log(globalvar1);

Honeysuckle

Answer 20

Please guys remember the initial question was for VARIABLES, not for OBJECTS ;)

in addition to all answers above, I created a tiny lib called forTheWatch.js, that use the same way to catch and callback for changes in normal global variables in javascript.

Compatible with JQUERY variables, no need to use OBJECTS, and you can pass directly an ARRAY of several variables if needed.

If it can be helpful... : https://bitbucket.org/esabora/forthewatch
Basically you just have to call the function :
watchIt("theVariableToWatch", "varChangedFunctionCallback");

And sorry by advance if not relevant.

Shark

Answer 21

The question is about variables, not object properties! So my approach is to take advantage of the window object, with its custom getters/setters, and then use/change the variable like a "normal" variable (not like an object property).

The simplest way is that of @José Antonio Postigo in his answer (i voted that answer). What I'd like to do here, is to reduce that to an even simpler "creator" function (so even someone that does not understand object getters/setters can easily use it).

A live example is here: https://codepen.io/dimvai/pen/LYzzbpz

This is the general "creator" function you must have as is:

let createWatchedVariable = (variableName,initialValue,callbackFunction) => {
    // set default callback=console.log if missing
    callbackFunction ??= function(){console.log(variableName+" changed to " + window[variableName])};
    // the actual useful code:
    Object.defineProperty(window, variableName, {
      set: function(value) {window["_"+variableName] = value; callbackFunction()},
      get: function() {return window["_"+variableName]}
    });
    window[variableName]=initialValue??null;
};

Then, instead of declaring the variable using var or let, use this:

// 1st approach - default callback//    
createWatchedVariable ('myFirstVariable',12);  
// instead of: let myFirstVariable = 12;

Or, in order to use your custom callback (instead of the default console.log) use:

// 2nd approach - set a custom callback//
var myCallback = ()=>{/*your custom code...*/}
// now use callback function as the third optional argument
createWatchedVariable('mySecondVariable',0,myCallback);

That's it! Now, you can change it like a "normal" variable:

myFirstVariable = 15;      // logs to console
myFirstVariable++;         // logs to console
mySecondVariable = 1001;   // executes your custom code
mySecondVariable++;        // executes your custom code

Grindelia

Answer 22

The solution of @akira and @mo-d-genesis can be further simplified because the DOM manipulation does not depend on state in this example:

CodePen

const render = (val) => {
  document.getElementById("numberDiv").innerHTML = val;
};

state = {
  _value_internal: undefined,
  set value(val) {
    // 1. set state value
    this._value_internal = val;
    // 2. render user interface
    render(val);
  },
  get value() {
    return this._value_internal;
  },
};

const onClick = () => {
  state.value = state.value + 1; // state change leads to re-render!
};

// set default value
state.value = 0;

The corresponding html:

<div id="numberDiv"></div>

<button onclick="onClick()">
  Click to rerender
</button>

Remarks:

1. I renamed variables and functions to better reflect their semantics.
2. FYI: Svelte offers a very similar reactive behavior by changing variables

Sparky

Answer 23

It's not directly possible.

However, this can be done using CustomEvent: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

The below method accepts an array of variable names as an input and adds event listener for each variable and triggers the event for any changes to the value of the variables.

The Method uses polling to detect the change in the value. You can increase the value for timeout in milliseconds.

function watchVariable(varsToWatch) {
    let timeout = 1000;
    let localCopyForVars = {};
    let pollForChange = function () {
        for (let varToWatch of varsToWatch) {
            if (localCopyForVars[varToWatch] !== window[varToWatch]) {
                let event = new CustomEvent('onVar_' + varToWatch + 'Change', {
                    detail: {
                        name: varToWatch,
                        oldValue: localCopyForVars[varToWatch],
                        newValue: window[varToWatch]
                    }
                });
                document.dispatchEvent(event);
                localCopyForVars[varToWatch] = window[varToWatch];
            }
        }
        setTimeout(pollForChange, timeout);
    };
    let respondToNewValue = function (varData) {
        console.log("The value of the variable " + varData.name + " has been Changed from " + varData.oldValue + " to " + varData.newValue + "!!!"); 
    }
    for (let varToWatch of varsToWatch) {
        localCopyForVars[varToWatch] = window[varToWatch];
        document.addEventListener('onVar_' + varToWatch + 'Change', function (e) {
            respondToNewValue(e.detail);
        });
    }
    setTimeout(pollForChange, timeout);
}

By calling the Method:

watchVariables(['username', 'userid']);

It will detect the changes to variables username and userid.

Flexuous

Answer 24

This is what I did: Call JSON.stringify twice and compare the two strings...

Drawbacks:

• You can only know whether the whole object changes
• You have to detect changes manually
• You better have only primitive fields in the object(no properties, no functions...)

Watson

Answer 25

This is NOT a production ideal answer, but what it is doing is setting an interval in JavaScript for every 100 milliseconds and checking to see if the variable is changed and when it is, it does something (anything intended by the OP) and then clears the interval, so it sort of simulates what the OP is asking.

let myvar = "myvar";

const checkChange = setInterval(() => {
    if (myvar !== "myvar") {
        console.log("My precious var has been changed!");
        clearInterval(checkChange);
    }
}, 100);

Now if myvar gets changed to something else then this program will say "My precious var has been changed!" :)

Xerxes

Answer 26

This is an old thread but I stumbled onto second highest answer (custom listeners) while looking for a solution using Angular. While the solution works, angular has a better built in way to resolve this using @Output and event emitters. Going off of the example in custom listener answer:

ChildComponent.html

<button (click)="increment(1)">Increment</button>

ChildComponent.ts

import {EventEmitter, Output } from '@angular/core';

@Output() myEmitter: EventEmitter<number> = new EventEmitter<number>();

private myValue: number = 0;

public increment(n: number){
  this.myValue += n;

  // Send a change event to the emitter
  this.myEmitter.emit(this.myValue);
}

ParentComponent.html

<child-component (myEmitter)="monitorChanges($event)"></child-component>
<br/>
<label>{{n}}</label>

ParentComponent.ts

public n: number = 0;

public monitorChanges(n: number){
  this.n = n;
  console.log(n);
}

This will now update non parent each time the child button is clicked. Working stackblitz

Starvation

Answer 27

I came here looking for same answer for node js. So here it is

const events = require('events');
const eventEmitter = new events.EventEmitter();

// Createing state to watch and trigger on change
let x = 10 // x is being watched for changes in do while loops below

do {
    eventEmitter.emit('back to normal');
}
while (x !== 10);

do {
    eventEmitter.emit('something changed');
}
while (x === 10);

What I am doing is setting some event emitters when values are changed and using do while loops to detect it.

Herries

Answer 28

I searched for JavaScript two-way data binding library and came across this one.

I did not succeed to make it work in DOM to variable direction, but in variable to DOM direction it works and that is what we need here.

I have rewritten it slightly, as the original code is very hard to read (for me). It uses Object.defineProperty, so the second most upvoted answer by Eliot B. at least partially wrong.

<!DOCTYPE html>
<html>
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        const dataBind = (function () {
            const getElementValue = function (selector) {
                let element = document.querySelectorAll(selector)[0];
                return 'value' in element ? element.value : element.innerHTML;
            };
            const setElementValue = function (selector, newValue) {
                let elementArray = document.querySelectorAll(selector);
                for (let i = 0; i < elementArray.length; i++) {
                    let element = elementArray[i];
                    if ('value' in element) {
                        element.value = newValue;
                        if (element.tagName.toLowerCase() === 'select'){
                            let options = element.querySelectorAll('option');
                            for (let option in options){
                                if (option.value === newValue){
                                    option.selected = true;
                                    break;
                                }
                            }
                        }
                    } else {
                        element.innerHTML = newValue;
                    }
                }
            };

            const bindModelToView = function (selector, object, property, enumerable) {
                Object.defineProperty(object, property, {
                    get: function () {
                        return getElementValue(selector);
                    },
                    set: function (newValue) {
                        setElementValue(selector, newValue);
                    },
                    configurable: true,
                    enumerable: (enumerable)
                });
            };
            return {
                bindModelToView
            };
        })();
    </script>
</head>
<body>
    <div style="padding: 20%;">
        <input  type="text" id="text" style="width: 40px;"/>
    </div>
    <script>
        let x = {a: 1, b: 2};
        dataBind.bindModelToView('#text', x, 'a'); //data to dom

        setInterval(function () {
             x.a++;
        }, 1000);
   </script> 
</body>

</html>

JSFiddle.

JSFiddle with original code.

In the provided example a property of object x updated by the setInterval and value of text input automatically updated as well. If it is not enough and event is what you looking for, you can add onchange listener to the above input. Input also can be made hidden if needed.

Edna

Could you use a MutationObserver to achieve the other side of your two-way bind? The Object.define() will bind variable to DOM, and the MutationObserver will bind DOM to variable. – Braynard

Also, your code throws this error for me when run as-is: Uncaught TypeError: Cannot use 'in' operator to search for 'value' in undefined – Braynard

@BrandonMcConnell. Two-way binding is not a point here. Maybe you can do it with MutationObserver. It can be done with a simple Change event for DOM elements that support it and DOMSubtreeModified for divs and spans. I cannot say why your code is not working. Check jSfiddle - it works. – Edna

2-way binding was a point here. You mentioned in your solution that you "searched for a JavaScript two-way data binding library" – Braynard

Answer 29

Utils = {
    eventRegister_globalVariable : function(variableName,handlers){
        eventRegister_JsonVariable(this,variableName,handlers);
    },
    eventRegister_jsonVariable : function(jsonObj,variableName,handlers){
        if(jsonObj.eventRegisteredVariable === undefined) {
            jsonObj.eventRegisteredVariable={};//this Object is used for trigger event in javascript variable value changes ku
        }
        Object.defineProperty(jsonObj, variableName , {
                    get: function() { 
                        return jsonObj.eventRegisteredVariable[variableName] },
                    set: function(value) {
                        jsonObj.eventRegisteredVariable[variableName] = value; handlers(jsonObj.eventRegisteredVariable[variableName]);}
                    });
            }

Honeysuckle