Getters and Setters III - "RangeError: Maximum call stack size exceeded"


#1

Exercise:
https://www.codecademy.com/courses/learn-javascript-objects/lessons/objects/exercises/getters-setters-iii?action=lesson_resume&course_redirect=introduction-to-javascript

The lesson gives me both green check boxes, but the console has an error. What gives?

My Code:

let person = {
  _name: 'Lu Xun',
  _age: 137,
  set age(newAge) {
    if (typeof newAge === 'number') {
      this._age = newAge;
    } else {
      console.log('Invalid input');
      return 'Invalid input';
    }
  },
  get age() {
  	console.log(`${this.name} is ${this.age} years old.`);
    return this.age;
	}
};

console.log(person.age);

And when I click “Run”:

/home/ccuser/workspace/learn-javascript-objects-getters-setters/main.js:13
  	console.log(`${this.name} is ${this.age} years old.`);
  	^

RangeError: Maximum call stack size exceeded
    at Object.get age [as age] (/home/ccuser/workspace/learn-javascript-objects-getters-setters/main.js:13:4)
    at Object.get age [as age] (/home/ccuser/workspace/learn-javascript-objects-getters-setters/main.js:13:39)
    at Object.get age [as age] (/home/ccuser/workspace/learn-javascript-objects-getters-setters/main.js:13:39)
    at Object.get age [as age] (/home/ccuser/workspace/learn-javascript-objects-getters-setters/main.js:13:39)
    at Object.get age [as age] (/home/ccuser/workspace/learn-javascript-objects-getters-setters/main.js:13:39)
    at Object.get age [as age] (/home/ccuser/workspace/learn-javascript-objects-getters-setters/main.js:13:39)
    at Object.get age [as age] (/home/ccuser/workspace/learn-javascript-objects-getters-setters/main.js:13:39)
    at Object.get age [as age] (/home/ccuser/workspace/learn-javascript-objects-getters-setters/main.js:13:39)
    at Object.get age [as age] (/home/ccuser/workspace/learn-javascript-objects-getters-setters/main.js:13:39)
    at Object.get age [as age] (/home/ccuser/workspace/learn-javascript-objects-getters-setters/main.js:13:39)

#2

That is recursing over the getter.

return this._age;

or better,

return `${this._name} is ${this._age} years old.`;

Getters should not do any logging. That should be left to the caller.

console.log(person.age);

The getter is called to retrieve the ._age property.


#3

That worked. In the lesson example, though, they do show the getter logging, so that would explain why I am confused!

Codecademy’s own lesson code (not mine):

let restaurant = {
  _name: 'Italian Bistro',
  _seatingCapacity: 120,
  _hasDineInSpecial: true,
  _entrees: ['Penne alla Bolognese', 'Chicken Cacciatore', 'Linguine pesto'],

  set seatingCapacity(seatingCapacity) {
      if (typeOf newCapacity === 'number') {
        this._seatingCapacity = newCapacity;
    } else {
        console.log(`Change ${newCapacity} to a number.`)
    }
  },

  get seatingCapacity() {
      console.log(`There are ${this._seatingCapacity} seats at Italian Bistro.`);
      return this._seatingCapacity;
  }
}

#4

In a perfect world there would be no contradictions. Unfortunately when we are learning from multiple sources as self-learners it is always going to happen that we run across contradictory information.

As we gorw into the field, we start to formulate our own style guide and best practices regime. One of my general rules is that except for error messages, I let the caller do the logging.

console.log(restaurant.seatingCapacity);

Within lessons we have no choice but to go along with the author, but we should always remember that nothing is carved in stone when it comes to programming. All we have is syntax, style guides and best practices to fall back upon. Expect to see lots of curves in the road, and forks, too.


#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.