Unable to use property from constructor

Question

I'm creating two ES js Classes (Person, Teacher)

class Person {
    constructor (name = "no name") {
    this.name = name
}

Teacher inherit from Person

class Teacher extends Person {      
    constructor(name, degree){
        super(name)
            this.degree = degree; 
    }
}

In the teacher constructor, I have a new property called degree.

when I create a new property called Full name that takes name and degree. Degree shows as undefined. Although when I log object teacher property is there. It looks like a delay issue. But, shouldn't I be able to access property right away?

class Person {
  constructor(name = 'no name') {
    this.name = name;
  }
}

class Teacher extends Person {
  constructor(name, degree) {
    super(name);
    this.degree = degree;
  }

  fullname = this.degree + this.name;
  printFullName() {
    console.log(this.fullname);
  }
}

let person = new Teacher('Adam', 'MS.');

console.log(person);

person.printFullName(); // undefined Adam

https://repl.it/@adbarani/TrimBrilliantPaintprogram#index.js

there is no such field this.fullname the field is called "name" — digital illusion, Feb 24 '21 at 18:25
What makes you think that you can define something like `fullname` on the class like that? Are you intending to use something like a [getter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get)? — Alexander Staroselsky, Feb 24 '21 at 18:29
Just like I would define any other property in class that are not directly define in constructor @AlexanderStaroselsky — Adam Bahrani, Feb 24 '21 at 18:32

score 1 · Answer 1 · answered Feb 24 '21 at 19:11

This is the behaviour specified in the MDN documentation:

Public instance fields are added with Object.defineProperty() either at construction time in the base class (before the constructor body runs), or just after super() returns in a subclass.

Your code example is in the second case. The order of execution is thus:

Execute super() in case your class is a subclass
Define the public instance fields on this
Execute the rest of the constructor

If you need a work around, then don't define fullname with the field syntax, but assign to this.fullname as part of the constructor function.

Alexander Staroselsky · Answer 2 · 2021-02-24T18:37:55.290

0

Update fullname to a getter to compute the property value when it is accessed:

class Teacher extends Person {
  constructor(name, degree) {
    super(name);
    this.degree = degree;
  }

  get fullname() {
    return this.degree + this.name;
  };

  printFullName() {
    console.log(this.fullname);
  }
}

It sounds like you want fullname to be a property, why not set it in the constructor then?

class Teacher extends Person {
  constructor(name, degree) {
    super(name);
    this.degree = degree;
    this.fullname = this.degree + this.name;
  }

  printFullName() {
    console.log(this.fullname);
  }
}

Otherwise just change printFullName to do the work for you:

  printFullName() {
    console.log(this.degree + this.nam);
  }

Hopefully that helps!

edited Feb 24 '21 at 18:37

answered Feb 24 '21 at 18:30

Alexander Staroselsky

37,209
15
79
91

So there's no way to do it as a property/field ? – Adam Bahrani Feb 24 '21 at 18:35
If you are asking why `undefined` is also being logged out, it's because `printFullName` doesn't return anything, so basically it's doing `console.log(undefined)` – Alexander Staroselsky Feb 24 '21 at 18:36
1

You can set it in the constructor. Otherwise when degree or name changes, you need to change fullname also. Or just have printFullName do the work of combining the values for you instead of referencing full name. There are different ways to solve this including the constructor, changing how printFullName works, or using a getter. Which do you prefer? – Alexander Staroselsky Feb 24 '21 at 18:39
1

PrintFullName doesn't log undefine it print undefined + Adam, so only degree is undefined – Adam Bahrani Feb 24 '21 at 18:40
Did you have a chance to get the JSFiddle i linked in a previous comment? You can see if prints `MS.Adam`. – Alexander Staroselsky Feb 24 '21 at 18:41
Yes, still not as a property – Adam Bahrani Feb 24 '21 at 18:42
It make sense to define in the constructor, I'll do that Thank you! – Adam Bahrani Feb 24 '21 at 18:42

Unable to use property from constructor

2 Answers2