What's the difference here?

[timm49]

Hey guys, in some scripts I see a different way of calling a function. I was wondering what the idea behind this is. Is it a performance thing or something?

The (I guess) simple example:

function Foo() {
alert('hello');
}

Foo();

And this is what I more and more often see in code from others:

function Foo() {
alert('hoi');
}

var foo = new Foo();
foo.load();

I know how to use both, but I was wondering if there are certain cases when one is better to use than the other.

Thanks in advance!

[ReFreezed]

If you know how to use both then you should also know that the second script not just calls a function, but it also creates and returns a new object. The following two scripts does the same thing (creates a new object and adds a method to it), but one uses the new keyword and the other just calls a function which return an object:

function Foo1() {
  this.sayHello = function() { alert('hello'); };
}

var foo1 = new Foo1();
foo1.sayHello();

function Foo2() {
  var newObject = {};
  newObject.sayHello = function() { alert('hello'); };
  return newObject;
}

var foo2 = Foo2();
foo2.sayHello();

However, in your first script you're not creating any objects at all - you're just calling a function. I hope you can see the significant difference between calling a function and creating an object...

I might also add that your second script won't work unless you manually add the load method to the foo object either inside the Foo function or directly to the foo object after the statement with the new keyword.

foo.load = function(){};

[timm49]

Ok, maybe I should've mentioned I'm quite new with javascript. Although my question probably cleared that up.
I know how to use both since I both use them the same way, so in my case I might as well just use the first example, since for the simple stuff I do it works just as well as the second.

I'd like to see a practical example which shows when example 2 can do more than example 1. I still don't really see that here...

[ReFreezed]

An small example using objects:

function Counter(){
  var count = 0;
  this.increase = function(){ count++; };
  this.showCount = function(){ alert(count); };
}

var myCounter = new Counter();
var myOtherCounter = new Counter();

myCounter.increase();

myCounter.showCount(); // 1
myOtherCounter.showCount(); // 0

This script creates two objects (myCounter and myOtherCounter). Both has their own private memory (the count variable) and methods to manipulate the objects with (the increase and showCount functions). We could do something similar using only functions:

var count = 0;

function increaseCount(){
  count++;
}
function showCount(){
  alert(count);
}

increaseCount();
showCount(); // 1

However in that script we're limited to only one counter.

[timm49]

Aah, great! Very clear. Obviously another question though...

If you only need 1 object (like in the second example), is there a reason why you shouldn't use the first example you showed?

[ReFreezed]

Using objects with properties and methods can certainly be useful over just using functions and variables even if you only need one object. Not least, it can give your program a better structure. Like with the Counter object in my first example - all functions and properties related to counting anything is right inside the Counter objects we create (like the name "counter" suggests). We don't need to clutter the global namespace with global variables and functions like in the second example - everything is contained within the Counter objects we create with new Counter().

The Counter is just a simple example of course, and this guide on MDN might better explain how objects works.