Javascript getters and setters - recursion issue

Question

Can someone please help me understand the significance of the '_' character in the setters and getters of javascript. For example I have the following code which works fine.

var user = {
    get name() {
        return this._name;
    },    
    set name(value) {
        this._name = value;
    }
};

var me = user;
me.name = "Rob";

alert(me.name);

But if I remove the underscore so my code will look like the following, then my code won't work and I get a an error in the browser console stating "RangeError: Maximum call stack size exceeded."

var user = {
    get name() {
        return this.name;
    },    
    set name(value) {
        this.name = value;
    }
};

var me = user;
me.name = "Rob";

alert(me.name);

</script>

Can someone please explain to me what the "_" does in this situation?

Answer 1

It's quite simple. In your second example, the get, calls itself.

Since you reference the property me.name, JavaScript needs to get that property. When this happens, the getter is triggered. Using your second example, JavaScript calls the getter, but the getter is then told to do the exact same thing: get the property that it is meant to handle. The function always calls itself, making it infinitely recursive.

However, in the first example, the property that is being retrieved in the getter is not the same as the one that originally triggered the getter. The value being retreived by the getter is somewhat of a storage component to avoid the problem of recursion mentioned above. The two properties have no actual connection between them even though they have similar names.

The same idea applies to the setter.