In JavaScript, does it make a difference if I call a function with parentheses?

Question

Hi, I noticed a different when calling a function with empty parentheses, or without any parentheses at all. I am not passing any arguments to the function so I wondered what would be the difference between:

window.onload = initAll();

and

window.onload = initAll;

Please explain the principle behind it. Thanx in advance.

Answer 1

window.onload = initAll();

This executes initAll() straight away and assigns the function's return value to window.onload. This is usually not what you want. initAll() would have to return a function for this to make sense.

window.onload = initAll;

this assigns the actual function to window.onload - this is possible because in JavaScript, as @Felix says, functions are first class objects - without executing it. initAll will be executed by the load event.

Answer 2

initAll is a reference to a function value and the brackets operator appended to the function name RUNS this function object.

So if you do something like

a = initAll

then a will become the same as initAll - for example you can do a() - but with

a = initAll()

the variable a will get the return value of the executed initAll function

Answer 3

Functions in javascript are first-class citizens, and as such, can be assigned to other variables or passed around as arguments.

So, when you do

window.onload = initAll;

You are setting the onload property of the window object to reference the initAll function itself.

When you do

window.onload = initAll();

You are setting the onload property to hold the return value of initAll, since it will execute in place on that line.

Answer 4

What Pekka says is correct, but I want to elaborate a little with an example that will help explain to someone who doesn't fully understand function pointers or delegates.

I won't use window.onload because that's a bit contrived to demonstrate. I'll use a simple multiply function to demo instead:

function Multiply(operator, operand) {
    return operator * operand;
}

This could equally be written:

Multiply = function(operator, operand) {
    return operator * operand;
}

While in the first example, the implication may not be obvious, the second example shows more clearly that we're assigning a function which has 2 parameters to a variable called Multiply, and this concept of functions as assignments is common throughout javascript. This is a small demonstration of the fact that functions are "first class citizens", that is, they can be passed around exactly as if we were passing around values.

So now to the difference of assignment:

var operator = 3;
var operand = 4;
var ret = Multiply(operator, operand);

At the point of defining the ret variable, Multiply is executed and the return value is assigned - ret becomes equal to 12.

Lets try that again a different way:

var operator = 3;
var operand = 4;
var ret = Multiply;

Now, at the point of defining ret, ret becomes your Multiply function as opposed to being the result obtained from your Multiply function. Calls to ret() will cause your Multiply function to be executed, and you can call it exactly as if you'd called Multiply(operator, operand):

var out = ret(3, 4);

is the same as

var out = Multiply(3, 4);

You have effectively said that you are going to use ret as a delegate for Multiply(). When calling ret, we're really referring to the Multiply function.

Back to your window.onload. Think of this as:

window.onload = function() {
    //Doing what all good window.onload functions should do...
}

initAll = function() {
    return 12;
}

So as you can see, window.onload is a function just like any other function, there's nothing special about it. You can assign it a value, assign it a function, null it out if you wish - the point is that there's nothing any more special about window.onload than there is about your own function. The only slightly different thing is that it gets called by the window when it's loaded. [Disclaimer: I've never actually nulled out window functions, so I'm not sure if this will cause negative repercussions. One would hope they check to see if a function is assigned before calling it i.e. if (window.onload) window.onload();].

Now calling initAll() what we're saying is:

window.onload = initAll();

which might as well say:

window.onload = 12;

But when we say initAll without the parentheses, what we're really saying is: I want to replace whatever my window.onload function is, with a new function - i.e. I want to replace it with my initAll function, so that any calls to window.onload runs my initAll code:

So:

window.onload = function() {
    //Doing what all good window.onload functions should do...
}

is replaced with:

window.onload = function() {
    return 12;
}

So any call to window.onload will execute your initAll function instead of whatever window.onload was originally. You have replaced the original function with your new function.

In fact, you could equally write:

window.onload = function() {
    //Write all your init code right in here instead of having a separate 
    //initAll function.
}

Another example that may demonstrate better is this:

var d = new Date();
var currentTime = d.getTime();

Whatever the time was at the time d is defined ends up assigned to currentTime. Great, but that's only useful if we want to find out what time the function containing that code was called - i.e. at page load time. What if we want the current time any time that currentTime is called?

var currentTime = function() {
    var d = new Date();
    return d.getTime();
}

var a = currentTime(); //The current time at the point a is defined...
var b = currentTime;   //b is a functional reference to currentTime...
var c = b(); //The current time when variable c is defined
var d = c; //The current time when variable c was defined

Notice how we call b() in our c and d assignments exactly as we could call currentTime()?