Как понимаешь из кода что значение могло поменяться?

Определение изменения значения в коде

Это фундаментальный навык отладки и анализа кода. В JavaScript есть несколько способов отследить, когда значение изменилось.

1. Прямая проверка через логирование

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

let counter = 0;

console.log('Начальное значение:', counter); // 0

counter = 5;
console.log('После присваивания:', counter); // 5

counter++;
console.log('После инкремента:', counter); // 6

2. Object.defineProperty для отслеживания изменений

Для отслеживания изменений свойств объекта используем getters и setters.

const user = {};

Object.defineProperty(user, 'name', {
  get() {
    console.log('Чтение name');
    return this._name;
  },
  set(newValue) {
    console.log(`name изменено: ${this._name} -> ${newValue}`);
    this._name = newValue;
  }
});

user.name = 'John'; // "name изменено: undefined -> John"
console.log(user.name); // "Чтение name" затем "John"

3. Proxy для отслеживания всех изменений

Самый мощный способ перехватить любые операции с объектом.

const original = { count: 0, name: 'App' };

const handler = {
  get(target, property) {
    console.log(`Доступ к ${property}: ${target[property]}`);
    return target[property];
  },
  set(target, property, value) {
    if (target[property] === value) {
      console.log(`${property} имеет то же значение: ${value}`);
    } else {
      console.log(`${property}: ${target[property]} -> ${value}`);
      target[property] = value;
    }
    return true;
  }
};

const proxied = new Proxy(original, handler);

proxied.count = 1; // "count: 0 -> 1"
proxied.count = 1; // "count имеет то же значение: 1"
console.log(proxied.name); // "Доступ к name: App"

4. React: useEffect для отслеживания изменений

import { useState, useEffect } from 'react';

export function ComponentWithTracking() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  // Отслеживаем все изменения count
  useEffect(() => {
    console.log('count изменился:', count);
  }, [count]);

  // Отслеживаем изменения нескольких значений
  useEffect(() => {
    console.log('count или name изменились:', { count, name });
  }, [count, name]);

  // Отслеживаем только первую загрузку
  useEffect(() => {
    console.log('Компонент загрузился');
  }, []);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
      <input 
        value={name} 
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

5. Класс с явным отслеживанием

class StateTracker {
  constructor(initialValue) {
    this._value = initialValue;
    this.history = [initialValue];
  }

  get value() {
    return this._value;
  }

  set value(newValue) {
    if (this._value !== newValue) {
      console.log(`Значение изменилось: ${this._value} -> ${newValue}`);
      this.history.push(newValue);
      this._value = newValue;
    } else {
      console.log(`Попытка установить то же значение: ${newValue}`);
    }
  }

  getHistory() {
    return this.history;
  }
}

const tracker = new StateTracker(10);
tracker.value = 20; // "Значение изменилось: 10 -> 20"
tracker.value = 20; // "Попытка установить то же значение: 20"
console.log(tracker.getHistory()); // [10, 20]

6. MutationObserver для отслеживания DOM изменений

const element = document.getElementById('myElement');

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'characterData') {
      console.log('Текст изменился:', mutation.target.data);
    } else if (mutation.type === 'attributes') {
      console.log(`Атрибут ${mutation.attributeName} изменился`);
    } else if (mutation.type === 'childList') {
      console.log('Дочерние узлы изменились');
    }
  });
});

observer.observe(element, {
  characterData: true,
  subtree: true,
  attributes: true,
  attributeOldValue: true,
});

// Изменяем DOM
element.textContent = 'Новый текст'; // "Текст изменился: Новый текст"
element.setAttribute('data-value', '42'); // "Атрибут data-value изменился"

7. WeakMap для приватного отслеживания

const stateMap = new WeakMap();

function createTrackedObject(data) {
  const obj = {};
  
  // Сохраняем текущее состояние
  stateMap.set(obj, JSON.stringify(data));
  
  return new Proxy(data, {
    set(target, property, value) {
      const oldState = stateMap.get(obj);
      target[property] = value;
      const newState = JSON.stringify(target);
      
      if (oldState !== newState) {
        console.log('Состояние изменилось');
      }
      
      stateMap.set(obj, newState);
      return true;
    }
  });
}

const tracked = createTrackedObject({ count: 0 });
tracked.count = 1; // "Состояние изменилось"

8. Сравнение значений (глубокое и поверхностное)

// Поверхностное сравнение
function hasChanged(prev, next) {
  return prev !== next;
}

// Глубокое сравнение для объектов
function deepEqual(obj1, obj2) {
  if (obj1 === obj2) return true;
  
  if (typeof obj1 !== 'object' || obj1 === null ||
      typeof obj2 !== 'object' || obj2 === null) {
    return false;
  }
  
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  
  if (keys1.length !== keys2.length) return false;
  
  return keys1.every(key => deepEqual(obj1[key], obj2[key]));
}

const user1 = { name: 'John', age: 30 };
const user2 = { name: 'John', age: 30 };

console.log(hasChanged(user1, user2)); // true (разные объекты)
console.log(deepEqual(user1, user2)); // true (одинаковое содержимое)

9. React DevTools для отладки состояния

В браузере с установленным React DevTools можно:

// Использовать браузерную консоль
// DevTools покажет все re-renders и изменения состояния

// Профилирование в коде
console.time('operation');
// какой-то код
console.timeEnd('operation'); // вывод времени выполнения

10. Явное отслеживание в TypeScript

interface ChangeTracker<T> {
  value: T;
  changed(): boolean;
  hasChangedFrom(previousValue: T): boolean;
}

class TypedTracker<T> implements ChangeTracker<T> {
  private previousValue: T | undefined;
  private currentValue: T;

  constructor(initialValue: T) {
    this.currentValue = initialValue;
  }

  get value(): T {
    return this.currentValue;
  }

  set value(newValue: T) {
    if (this.currentValue !== newValue) {
      this.previousValue = this.currentValue;
      this.currentValue = newValue;
      console.log(`Изменено: ${this.previousValue} -> ${this.currentValue}`);
    }
  }

  changed(): boolean {
    return this.previousValue !== undefined && 
           this.previousValue !== this.currentValue;
  }

  hasChangedFrom(previousValue: T): boolean {
    return this.currentValue !== previousValue;
  }
}

const tracker = new TypedTracker<number>(0);
tracker.value = 5;
console.log(tracker.changed()); // true
console.log(tracker.hasChangedFrom(0)); // true

Best Practices для отслеживания изменений

1. Используй console.log на ключевых точках - простой и эффективный подход
2. Proxy и defineProperty - для сложных объектов
3. useEffect в React - для отслеживания изменений состояния
4. MutationObserver - для DOM изменений
5. React DevTools - для визуальной отладки
6. Документируй изменения - комментариями в коде
7. Добавляй тесты - проверяй, что изменения происходят правильно