How does watch function work? about arrow-js

[justin-schroeder]

Good question. However, the halting problem need not apply since we actually run the code — there is no static analysis or deterministic algorithm. Conceptually this is not that complicated (it is also, by the way, how signals work and how vue works — it is a clever trick though), in your example:

function total () {
  if (data.logTotal == ifMathTheoremIsTrue()) {
    console.log(`Total: ${data.price * data.quantity}`);
  }
}

we start by running the function and observing which properties are touched. Given a state of:

data = {
  logTotal: 1,
  price: 1,
  quantity: 10
}

And given that ifMathTheoremIsTrue() has no dependencies on data and returns 1, then the dependencies of the first run are:

data.logTotal, data.price, data.quantity

The only time we need to re-run this function are if any of those dependencies are changed. Lets say logTotal now changes to 1. We re-run the function and the dependencies are:

data.logTotal

we can now diff the dependency results:

| data.logTotal, data.price, data.quantity
|---------------------------------------
| data.logTotal
|---------------------------------------
call $off on data.price, data.quantity

Hope that helps clear up how this works 👍

[Clonkex]

Ah, that's very helpful! I also had this question. When I first read the documentation it seemed like magic, but now I see it just tracks the dependencies from each run. If logTotal changes to false, the function will run again and now it will know that price and quantity are no longer relevant. If logTotal changes back to true, it will know to start tracking price and quantity again. Very clever indeed!