JavaScript - understand methods

Question

I have doubts about understanding the principles of methods.
I understand functions and I know that

function hello() {
    alert('Hello World');
}  

is the same as

var hello = function() {
    alert('Hello World');
}  

Now, what's my problem is.
Here is my object with one method. I don't understand why parenthesis are don't needed at yarsLeft inside function people()
I am looking for a logical explanation.

function people(name, age) {
    this.name = name;
    this.age = age;
    this.yearsUntilRetire = yearsLeft; // this is confised for me
}

function yearsLeft() {
    var numYears = 65 - this.age;
    return numYears;
}

Create object

var test = new people('Superman', 50);
test.yearsUntilRetire(); // I understand this code and calling a method in that way

Why I can't write this.yearsUntilRetire() = yearsLeft or this.yearsUntilRetire = yearsLeft();

Answer 1

When you use the name of a function without parentheses ( () ) you are setting a reference to the function itself .

When you use the same function with parentheses you are executing the function .

Therefore this line

this.yearsUntilRetire = yearsLeft;

Is setting yearsUntilRetire to point to the function. Thereafter you can do this:

this.yearsUntilRetire(); // execute the yearsLeft function.

---

Why I can't write this.yearsUntilRetire() = yearsLeft or this.yearsUntilRetire = yearsLeft();

In the first case, you cannot set the result of calling a function to a different result - it is a syntax error.

In the second case, you can - it sets the variable yearsUntilRetire to the result of calling the function yearsLeft

Answer 2

1) function hello() {alert('Hello World');} is NOT same as var hello = function() {alert('Hello World');}

First one is a Function declaration. and second one is a Function Expression assigned to a variable called hello . but of course while using these two function, you can think of it as same and both behaves the same.

2) function will always be called like Function name followed by parenthesis eg: yearsLeft() . and thats the only way to call a function.

Functions are First Class objects in JS. It can be declared, Expressed, assigned, pass to another function and returned from a function.

so in your case, your intention is to assign the global function yearsLeft to object property yearsUntilRetire . which you do exactly the way any other assignment is done - remember " Functions are First Class objects "

Answer 3

Here is a couple of working examples to illustrate the answers to your question. See comments inline for an explanation.

 console.assert( typeof helloWorldAsVar === 'function', 'helloWorldAsVar is defined' ); console.log( helloWorldAsVar ); console.assert( typeof helloWorld === 'function', 'helloWorld is defined' ); // creating a function like helloWorld means it will be hoisted to the top of the file as js does two passes // when compiling the script. one to declare all the functions and initialize all the variables as undefined. // and another to run through the code. console.log(helloWorld); var helloWorldAsVar = function() { return 'this will not get hoisted, and the function name is anonymous'; } // helloWorldAsVar is only available after it is declared. console.assert(typeof helloWorldAsVar === 'function', 'helloWorldAsVar is defined'); console.log( helloWorldAsVar ); function helloWorld() { return 'this will get hoisted to the top of the function, and it will keep its name'; } 

 <script src="http://codepen.io/synthet1c/pen/WrQapG.js"> </script> 

 // this is a constructor function, it is essentially a typed object that can // have it's own methods similar to an oop class in other languages like php or java // the convention is to name a constructor with the first letter capitalized and it should be singular function Person(name, age) { // here you are assigning properties to your People object this.name = name; this.age = age; // you are passing a reference to the yearsLeft function // this.yearsUntilRetire = yearsLeft; } // a more standard way to add the yearsLeft function is to // use the People.prototype object which get's methods delegated to it eg. Person.prototype.yearsUntilRetire = yearsLeft; function yearsLeft() { var numYears = 65 - this.age; return numYears; } // Create objects var superman = new Person('Clark', 50 ), batman = new Person('Bruice', 40 ); console.log( superman, 'yearsUntilRetire', superman.yearsUntilRetire() ); console.log( batman, 'yearsUntilRetire', batman.yearsUntilRetire() ); // Why I can 't write this.yearsUntilRetire() = yearsLeft or this.yearsUntilRetire = yearsLeft(); console.assert(this === window, 'this in the global context refers to the window object' ); console.assert(superman instanceof Person, 'superman is a Person' ); console.assert(batman instanceof Person, 'batman is a Person' ); 

 <script src="http://codepen.io/synthet1c/pen/WrQapG.js"></script>