JavaScript - Uncaught RangeError: Maximum call stack size exceeded

Question

I got an error while use this code

var book = {
        year: 2004,
        edition: 1
    };

    Object.defineProperty(book, "year", {
        get: function(){
            return this.year;
        },
        set: function(newValue){

            if (newValue > 2004) {
                this.year = newValue;
                this.edition += newValue - 2004;
            }
        }
    });

    book.year = 2005;
    alert(book.edition);

The warning told me that the error happened at Object.set [as year]this.year = newValue; I am confused that why setting the year will cause this error?

Quentin · Accepted Answer · 2017-05-04 10:29:21Z

1

When you set the year property, you implicitly call the set function.

The set function sets the year property (if the value is > 2004).

So:

You set the year property to 2005
The set function sets the year property to 2005
GOTO 2 and loop for infinity

answered May 4, 2017 at 10:29

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nils · Accepted Answer · 2017-05-04 10:31:23Z

You're defining a getter and a setter for year. The setter, when assigning to this.year = newValue; invokes the setter again, which leads to an infinite loop. You would need to define a custom property _year for example, and keep your year state there:

var book = {
    edition: 1
};

Object.defineProperty(book, "_year", {
    value: 2004,
    enumerable: false, // Hide it when looping the object
    writeable: true,
    configurable: true
});

Object.defineProperty(book, "year", {
    get: function(){
        return this.year;
    },
    set: function(newValue){

        if (newValue > 2004) {
            this._year = newValue;
            this.edition += newValue - 2004;
        }
    },
    enumerable: true, // Show this when looping
    configurable: true
});

book.year = 2005;
alert(book.edition);

console.log(Object.keys(book)); // ['edition', 'year']

Joe Clay · Accepted Answer · 2017-05-04 10:31:01Z

Here's the sequence of events that's causing this error:

You set the year of the book.
Since it's a property, the value gets passed to your setter function.
The check gets performed - since in this case it's true, year gets set.
Uh oh - since you just set year, the setter gets run again.
The check continues to pass, since it's receiving the same value over and over.
Your browser starts looping forever, runs out of memory, and falls over in a big heap.

To avoid this, you need to store the actual value in a separate field of the object (e.g. this._year), and then have your getter return that value. Here's an example:

var book = {
    _year: 2004,
    edition: 1
};

Object.defineProperty(book, "year", {
    get: function() {
        return this._year;
    },
    set: function(newValue) {
        if (newValue > 2004) {
            this._year = newValue;
            this.edition += newValue - 2004;
        }
    }
});

book.year = 2005;
alert(book.edition);

Collectives™ on Stack Overflow

JavaScript - Uncaught RangeError: Maximum call stack size exceeded

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related