Check if value of an object of certain class has been altered in JavaScript and update another value based on it?

In JavaScript, you can monitor changes to object properties and automatically update dependent values using getters and setters. This approach allows you to create reactive properties that respond when other properties change.

Basic Property Monitoring with Getters

The simplest approach uses getter methods to access current property values:

class Student {
    constructor(studentMarks1, studentMarks2) {
        this.studentMarks1 = studentMarks1;
        this.studentMarks2 = studentMarks2;
        var self = this;
        
        this.getValues = {
            get studentMarks1() {
                return self.studentMarks1;
            },
            get studentMarks2() {
                return self.studentMarks2;
            }
        };
    }
}

var johnSmith = new Student(78, 79);
console.log("Before incrementing:");
console.log("StudentMarks1=" + johnSmith.studentMarks1, "StudentMarks2=" + johnSmith.studentMarks2);

johnSmith.studentMarks2 += 10;
console.log("After incrementing studentMarks2 by 10:");
console.log("StudentMarks1=" + johnSmith.studentMarks1, "StudentMarks2=" + johnSmith.getValues.studentMarks2);

Before incrementing:
StudentMarks1=78 StudentMarks2=79
After incrementing studentMarks2 by 10:
StudentMarks1=78 StudentMarks2=89

Advanced Approach: Automatic Updates with Setters

For true reactive behavior, use setters to automatically update dependent properties when values change:

class Student {
    constructor(marks1, marks2) {
        this._marks1 = marks1;
        this._marks2 = marks2;
        this._totalMarks = marks1 + marks2;
    }
    
    get marks1() {
        return this._marks1;
    }
    
    set marks1(value) {
        this._marks1 = value;
        this._totalMarks = this._marks1 + this._marks2; // Auto-update total
        console.log("Marks1 changed! New total:", this._totalMarks);
    }
    
    get marks2() {
        return this._marks2;
    }
    
    set marks2(value) {
        this._marks2 = value;
        this._totalMarks = this._marks1 + this._marks2; // Auto-update total
        console.log("Marks2 changed! New total:", this._totalMarks);
    }
    
    get totalMarks() {
        return this._totalMarks;
    }
}

var student = new Student(78, 79);
console.log("Initial total:", student.totalMarks);

student.marks2 = 89; // Triggers automatic total update
console.log("Final total:", student.totalMarks);

Initial total: 157
Marks2 changed! New total: 167
Final total: 167

Using Proxy for Advanced Property Monitoring

For more complex scenarios, use Proxy to intercept all property changes:

function createReactiveStudent(marks1, marks2) {
    const target = {
        marks1: marks1,
        marks2: marks2,
        total: marks1 + marks2
    };
    
    return new Proxy(target, {
        set(obj, prop, value) {
            obj[prop] = value;
            if (prop === 'marks1' || prop === 'marks2') {
                obj.total = obj.marks1 + obj.marks2;
                console.log(`${prop} changed to ${value}. New total: ${obj.total}`);
            }
            return true;
        }
    });
}

var reactiveStudent = createReactiveStudent(78, 79);
console.log("Initial:", reactiveStudent.total);

reactiveStudent.marks1 = 85; // Automatically updates total
reactiveStudent.marks2 = 92; // Automatically updates total

Initial: 157
marks1 changed to 85. New total: 164
marks2 changed to 92. New total: 177

Comparison of Approaches

Conclusion

Use getters and setters for reactive properties that automatically update dependent values. For advanced scenarios requiring comprehensive property monitoring, Proxy provides the most flexible solution.