Question

Suppose I create an object in javascript.

var myObject = {};

What is the difference between…

myObject.someFunc = function(){...}; 

and

myObject.prototype.someFunc = function(){...} 

in javascript?

I am having trouble understanding the difference or if there is a difference and how and when to use either of these syntaxes.

It seems when I code something like this that there really is no difference.

I am looking for both a client side (browser) and server side (like node.js) answers.

I want to code properly and accurately and this is really bothering me.

Answer 1

In this case:

var myObject = {};
myObject.someFunc = function(){...}; 

All you’re doing is creating a plain object, which happens to have a property which is a reference to a function. This is often done just for name spacing, i.e. to group a whole load of functions in one place under a common object.

Note however that var myObject = {} doesn’t actually have a prototype so your second example is impossible.

For an object to have a prototype it must be the result of a constructor function, i.e.

function MyObject() {
    ...
}

MyObject.prototype.someFunc = function() { }

var myObject = new MyObject();
// myObject.someFunc can now be used

The prototype is a property of the constructor function – not of any instance of that class.

If you put the function on the prototype only one instance of the function object exists and will be shared by all instances of the class. This is more memory efficient that having a copy on each instance.

All of this applies regardless of whether the code is in a browser or on a server – it’s still the same language.