Property Changes page

The problem

The following example creates an object obj whose subject property is changed by something called within somethingWillMutate. What is the name of the function that changed obj.subject?

<script src="//bitovi.github.io/academy/static/scripts/debugging/variables.js"></script>
<script type="module">
function propertyChange(){

    var obj = {subject: "JavaScript"};

    somethingWillMutate(obj);

    console.log("what is the name of the function that changed obj.subject?");
    debugger;
}
propertyChange();
</script>

What you need to know

You can capture when a property is set using a setter. A setter can be created with Object.defineProperty like:

var propertyValue = object.property;
Object.defineProperty(object,"property",{
    get: function(){
        return propertyValue;
    },
    set: function(newValue){
        debugger;  
        propertyValue = newValue;
    }
});

This is used in the following example to discover where person.name is changed:

<script>
function checkIt(obj){ return checkName(obj.name); }
function checkName(obj){ return true; }
function addLastName(obj){ obj.name = "Justin Meyer"; }

function wrapWithAddress(obj){
    return {person: obj, address: "Chicago, IL"};
}

function doSomethingWithPerson(obj){
    checkIt(obj);
    addLastName(obj);
    wrapWithAddress(obj);
}
</script>
<script type="module">
var person = {name: "Justin"};

var name = person.name;
Object.defineProperty(person,"name",{
    get: function(){ return name; },
    set: function(newValue){ debugger;  name = newValue; }
});

doSomethingWithPerson(person);
console.log(person);
</script>

The solution

<script src="//bitovi.github.io/academy/static/scripts/debugging/variables.js"></script>
<script type="module">
function propertyChange(){

    var obj = {subject: "JavaScript"};

    var subject = obj.subject;
    Object.defineProperty(obj,"subject",{
        get: function(){ return subject; },
        set: function(newValue){ debugger;  subject = newValue; }
    });

    somethingWillMutate(obj);

    console.log("what is the name of the function that changed obj.subject?");
}
propertyChange();
</script>