変数の変更を検知させる JavaScript

はじめに

筆者はこれまで Vue などのライブラリ上でウォッチャーや算出プロパティを使用して変数の検知を行ってきた。
しかし今回、業務上でモダンなライブラリが使えなく、バニラのJSでの実装が必要になったためメモ。

実装方法

対象の値を保持させて新しい値と比べれば変更が認識できる。
監視し続けなくてはならないのでとりあえずタイマーを貼って監視する。
※タイマーなので実行され続けるのでご注意ください

.js

// 検知関数
const observer = (getValueFunc, onChangeFunc, intervalTime) => {
  let previousValue = getValueFunc();
  const onObserve = () => {
    const currentValue = getValueFunc();

    // 変更がない時は何もしない
    if (previousValue === currentValue) {
      return;
    }
    onChangeFunc(currentValue);
    previousValue = currentValue;
  };

  setInterval(onObserve, intervalTime);
};

// 試しに実行
(function () {
  // 検知対象
  let targetValue = "初期値";
  // 検知間隔
  const intervalTime = 100;

  // 変更検知の対象の取得
  const getValueFunc = () => {
    return targetValue;
  };
  // 変更検知時の処理
  const onChangeFunc = (changeValue) => {
    console.log(`変更後の値は${changeValue}`);
  };

  observer(getValueFunc, onChangeFunc, intervalTime);

  // 値を変更させてみる
  targetValue = "変更後";
})();