differences between defining functions/methods in JS?

Question

Here are 3 ways to address the key-value pair of objects constructed using constructor. What are the differences among these 3 ways in every describable aspects? (I would even like to enquiry about basic differences between function & method in terms of their functionality, usage, etc.)

function Person(name,age) {
  this.name = name;
  this.age = age;
}
var bob = new Person("Bob Smith", 30);
var me = new Person('Madhav Devkota', 55);

//===================================================
//A. Simple function
printPerson= function (p) { 
  console.log(p.name);
};
printPerson(bob);  printPerson(me);
//===================================================

//B. Method I
printPerson = function(){
  console.log(this.name) ;  
};
bob.printPerson = printPerson; me.printPerson = printPerson;
bob.printPerson(); me.printPerson();
//=================================================

//C. Method II
this.printPerson = function() {
    console.log(this.name);
};
bob.printPerson();      me.printPerson();

It all depends on the context. Sometimes one approach is more desirable, sometimes the other. From what you've shown us so far there is no real difference (there are some performance nuances). Also note that A vs B/C is actually "procedural programming" vs "object oriented programming". — freakish, Aug 31 '15 at 11:34
So you say, beside performance nuances there isn't much differences? — madhur, Aug 31 '15 at 11:47
Possible duplicate... [JS Method vs Function](http://stackoverflow.com/questions/15285293/method-vs-functions-and-other-questions), [Difference between method and function](http://stackoverflow.com/questions/9700173/odp-net-how-to-pass-array-of-strings-to-an-oracle-stored-procedure), [Yet another one](http://stackoverflow.com/questions/155609/difference-between-a-method-and-a-function). I would argue js only has functions. Functions don't have side effects `f(x) = y` vs `LogSomeData(data)`. Methods can have side effects and don't need to return a value. — Eric Lease, Aug 31 '15 at 14:06

score 1 · Accepted Answer · answered Aug 31 '15 at 13:25

I would also add

// 0. No function

console.log(bob.name);
console.log(me.name);

It is the most basic way. You are doing something with you object properties directly.

A. Simple function

You are giving your code a name to improve semantics. Now you are describing what your code is intended to do. You can access more properties and combine to create complex result without code repetition.

printPerson = function (p) { 
  console.log(p.name + ' is aged ' + p.age)
}

instead of No function

console.log(bob.name + ' is aged ' + bob.age);
console.log(me.name ' is aged ' + me.age);

B. Method I

Now your function is also a property of your object. Unlike simple function which works in scope where it is declared, your method it attached to your object and you can pass it around along with it. When invoked 'this' references the object from which method is invoked.

You can also do a 'nonsense' method like this:

printPerson = function(p){
  console.log(p.name) ;  
};
bob.printPerson = printPerson; me.printPerson = printPerson;
bob.printPerson(bob); me.printPerson(me);

C. Method II

This one is not quite right. It doesn't make sense in given context as 'this' is at that moment referencing Window object. At then end you are actually calling 'Method I' methods again. Correct way to use it is in constructor function:

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

Now your objects have .printPerson() method as soon as they are created.

I could elaborate more if you wish but it's important to notice that function vs method difference is not too relevant at this level of code complexity. When your code gets more complex code organization becomes important. For 'next level' you should get more familiar with Javascript scoping and object inheritance.

Thanks @Bizniztime for the distinction in the most simplest way possible. You say that Method II isn't quite right. I am learning the code from Codecademy.org; the code works well and in fact they teach both ways (mine and your "corrected" ways). Is Method II totally incorrect or just non-standard or improper way? Please disabuse my confusion. Thanks ! — madhur, Aug 31 '15 at 14:10
@madhur Is there any more code in that example? If not. Code doesn't work well because at the end where you are calling bob.printPerson() you are calling methods attached in Method I section. You can check it in debugger. Or try inserting 'console.log(this.constructor.name)' right before Method II and you will see that it prints out 'Window'. — Bizniztime, Sep 01 '15 at 07:17

differences between defining functions/methods in JS?

1 Answers1