Как отследить изменение значения в переменной?

Question

[NazarJs]

Как отследить изменение значения в переменной?
Мне нужно вызвать функцию если значение в переменной измениться.

Comments

[Сергей Соколов]

переменную вы создаёте? Можете изменить момент её создания?
Пример кода не помешал бы.

[NazarJs]

Сергей Соколов,
После изменения значения select в переменную должно присвоиться новое значение

[Сергей Соколов]

рукалицо

Для этого замените

select.addEventListener('change', function () {
  			return selectValue;
});

на

select.addEventListener('change', function (e) {
  selectValue = e.target.value;
});

[Сергей Соколов]

NazarJs, обновил в ответе фиддл

Answer 1

[Сергей Соколов]

Если есть возможность изменить код создания этой переменной..
Например, вместо
var a = 'QnA.habr.com';
написать

Object.defineProperty(this, 'a', {
    set: function(v) {console.log('Изменяют!'); this.value = v;},
    value: 'QnA.habr.com'
});

то теперь любое изменение значения переменной вызовет панику в консоли:

a = 'StackOver...';
// Изменяют!

Upd. выяснилось, вопрос был совсем про другое )

Comments

[Andrey Suha]

В данном случае this ссылается на window, если речь конечно о браузере. Является предложенный Вами метод хорошей практикой? Испозовали бы в своем проекте?

[Сергей Соколов]

Andrey Suha, проекты разные бывают.
Здесь у меня задача показать использование defineProperty(). Была..

[NazarJs]

Сергей Соколов, нужно чтобы значение изменилось не внутри функции, а вне её. Значение должно смениться в глобальной области видимости

[Сергей Соколов]

NazarJs, так и происходит. Внутри фунции меняем значение глобальной переменной, объявленной снаружи. Так можно было.

[NazarJs]

Сергей Соколов, Нужно чтобы второй консоль лог вывел новое значение, а не первый

[Сергей Соколов]

NazarJs, представьте, что тут выполняется когда:

1. Объявили переменную (она пока "1")
   
2. Прицепили слушатель события с функцией (она не выполнялась пока)
   
3. последняя строка вывела в консоль текущее значние (всё ещё "1")
   
4. выбрали новое значение в селекте
   
5. сработал слушатель события: выполнилась функция. На вход она получила объект События, из которого вытаскивается новое значение event.target.value – и глоб. переменная selectValue теперь имеет значение "5".
   
6. это значение "5" в этой же функции выводится в консоль. Самая послдняя строка кода с console.log() разумеется второй раз уже не выполнится.
   

[NazarJs]

Сергей Соколов, как я понял значение будет меняться только локально внутри addEventListener. Отталкиваясь от этого я запихнул весь код во внутрь addEventListener, но тут появились новые проблемы

[Сергей Соколов]

NazarJs, простыня полна ошибками. Например, подряд два button2.addEventListener() не гарантируют, который из двух выполнится раньше. Почему весь код не собрать внутри одного?

Возвращаясь к вопросу о переменной – посмотрите ещё раз про область видимости в JS.

let a = 'начальное значение'; // типа, глобальная переменная
function foo() {
  a = 'новое значение'; // поменяет глобальную переменную
}
foo(); 
console.log(a); // "новое значение"

И организовывать код лучше функциями. Вместо того, чтобы помещать весь код внутрь addEventListener() удобнее объявить отдельную функцию со всем этим кодом и передать в слушатель эту функцию. Так же можно её вызвать просто так и вне слушателя, при необходимости.

[NazarJs]

Сергей Соколов, я не совсем понимаю как нужно переписать. Сергей Соколов, можете помочь переписать?

[Сергей Соколов]

NazarJs, нет.

Answer 2

[FlatUser]

Юзайте эту библиотеку.

https://www.npmjs.com/package/track-changes-js

Пример

// tracked variable
let num = 1;

// add an observer, pass the name and function that returns the variable
trackChanges.addObserver('numObserv', () => num);

// add a handler, pass the name and function that will be called when changing "num"
trackChanges.addHandler('numObserv', numHandler);

/** 
create a function that will be called when the variable changes, the function argument will be its changed value 
**/
function numHandler(modifiedResult) {
  console.log(`Num changed to: ${ modifiedResult }`);
}

Comments

[Данил Веников]

умерла библиотека

[FlatUser]

itzme1on, обновил ответ

[Данил Веников]

FlatUser, нет, библиотека вообще не работает. Методов не видит просто среда разработки

[FlatUser]

itzme1on, я полагаю что ты её через min файл подрубаешь чтобы в браузере работало. IDE твоя об любой либе знать не будет

Npm пакет был создан исключительно для ноды

[Данил Веников]

FlatUser, нет, через npm устанавливаю и в js использую

[FlatUser]

itzme1on, понял.
Так не получится, изучи документацию.
Единственный путь работы в браузере это подключение напрямую min файла.

[Данил Веников]

FlatUser, да мне не в браузере нужно. Если с вами можно как-нибудь связаться, то можно это сделать? Я объясню проблему

[FlatUser]

itzme1on, телега @rz_pol

Answer 3

[Владимир Коротенко]

Вот из js

https://developer.mozilla.org/ru/docs/Web/JavaScri...

Вот пример из TS.

class foo {
    private _bar: boolean = false;
    get bar(): boolean {
        return this._bar;
    }
    set bar(value: boolean) {
        this._bar = value;
    }
}

Comments

[Andrey Suha]

Это все же относится не к переменным а к свойствам класса

[Владимир Коротенко]

Andrey Suha, Что мешает добавить 2 функции и изменять переменную только через них.

Кстати паршивая идея засорять глобальное пространство своими функциями, так что переменная уже член какого то объекта или нет?

[Andrey Suha]

Владимир Коротенко, не знаю)) я не автор