Gitter/javascript

@justoverclockl The reason your code doesn't work is that you are writing functions that keep infinitely calling themselves. To see why this is the case, let's take a moment to see how getters and setters work.

Normally when you write anObject.firstName, it literally means "give me the value of the firstName property of anObject". Likewise, when you write anObject.firstName = 'John', it means "set the value of the firstName property of anObject to 'John'".

Getters and setters change this. If you define a getter for firstName, this means that the firstName property of anObject is now a function. When you write anObject.firstName, this function is implicitly called and the result is returned. Likewise, if you define a setter for firstName, writing anObject.firstName = 'John' actually means that you are passing 'John' as an argument to a function.

In your code, you are doing this:

const person = {
    get firstName() {
      return this.firstName;
    },
    // ...
};

The middle line return this.firstName is implicitly calling the getter function itself. Which you just defined to run that middle line. So this will repeat in itself and never end. The other accessors have the same problem.

The way to fix this is to have a separate property that will hold the actual data. A common practice is to use the same name but with an underscore before it. In that case, your person object will look like this:

const person = {
    get firstName() {
      return this._firstName;
    },
    set firstName(value) {
      this._firstName = value;
    },
    get lastName() {
      return this._lastName;
    },
    set lastName(value) {
      this._lastName = value;
    },
    fullName() {
        return `${this.firstName} ${this.lastName}`
    },
};

Now you can create objects that inherit these accessors and the fullName method. You can supply the properties that hold the actual data while doing this. I'll show you the example for john:

const john = Object.create(person, {
    _firstName: 'John',
    _lastName: 'Doe',
});

For completeness, I'll mention that the use of accessors in this example is absolutely pointless. You can get the same result with less code and better performance if you just use regular properties:

const person = {
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
};

const john = Object.create(person, {
    firstName: 'John',
    lastName: 'Doe',
});

Of course the exercise is still useful to get a grasp of how accessors work, but just remember that using them is not a goal in itself. You only need to spend code and effort on accessors if you need to perform extra work when a property is read or written, for example to ensure that multiple properties stay consistent with each other or to trigger events.