How to get a constructor function to have an attribute value that is the outcome of a function?

Question

The title is probably confusing but I will use a code snippet so hopefully you can explain what's going on.

My constructor

function Person(name, age){
    this.name = name;
    this.age = age;
    this.yearsToRetire = function(){
    console.log(this.age); //undefined
    return 65-this.age;
 }();
}
var joe = new Person ("joe",26);
console.log(joe.yearsToRetire); //NaN

My question is how come it doesn't know the value of this.age when I have already passed it and it should be 26 at the time of execution of yearsToRetire? Is it possible to achieve the effect of getting the years until retirement as the return value rather than a function to execute?(i.e is there a way that I use joe.yearsToRetire to get 39 rather than joe.yearsToRetire())

Thanks

Answer 1

this within the function refers to the global window object or undefined in strict mode, not the Person. One solution is to use an arrow function with lexical this:

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.yearsToRetire = (() => {
    return 65 - this.age;
  })();
}
var joe = new Person("joe", 26);
console.log(joe.yearsToRetire); // 39

Of course, the simpler solution here is to get rid of the immediately invoked function expression (IIFE) and write this.yearsToRetire = 65 - this.age;

Alternatively, add yearsToRetire as a function to the prototype:

Person.prototype.yearsToRetire = function() {
  return 65 - this.age;
}

Or just remove the immediate invokation, as suggested by @ScottMargus - depending on what you want to achieve.

Answer 2

There are multiple problems. First you are invoking your function when you declare it which is putting the value of yearsToRetire as NaN. So remove the () at the end of your yearsToRetire function declaration. Second, you then need to call your function as a function: joe.yearsToRetire() instead of joe.yearsToRetire.

function Person(name, age){
    this.name = name;
    this.age = age;
    this.yearsToRetire = function(){
      return 65-this.age;
    };
}
var joe = new Person ("joe",26);
console.log(joe.yearsToRetire());

Answer 3

You can call the function in the Person's scope using call or apply or simply save a reference to the person object:

    function Person(name, age){
        var self = this;
        this.name = name;
        this.age = age;
        this.yearsToRetire = (function(){
            console.log(self.age);
            return 65-self.age;
        })();
    }
    var joe = new Person ("joe",26);
    console.log(joe.yearsToRetire);

Answer 4

You have three issues:

1. You were self-invoking the function
2. You weren't calling for the yearsToRetire function to run, you were just referencing it.
3. Methods generally are added to an object's prototype so that each new instance doesn't have to store the same functionality over and over again.

Now, as for #1 (above), function declarations are hoisted to the top of their enclosing scope and are read into memory at the start of that scope's processing. When the function is read, if it includes other function invocations, those functions will be invoked and that return values of those functions will be used as the values for the function being read. That was your main problem. You thought that the self-invocation of yearsToRetire wouldn't happen until a new instance of Person was made, but in fact, that invocation was happening immediately.

This is not the pattern to use when creating constructor functions.

function Person(name, age){
    this.name = name;
    this.age = age;
}  

// By adding the function to the prototype, each Person instance
// will inherit the method.
Person.prototype.yearsToRetire = function(){
      console.log("The passed age was: " + this.age);
      return 65-this.age;
};  // <-- You were self-invoking the function here


var joe = new Person ("joe",26);
console.log(joe.yearsToRetire());  // <-- You didn't include () after function name here