Function doesn't run when calling it with added parenthesis (even though it doesn't need parameters)

Question

Here's my function to alert me of the number of childNodes of the body tag.

    function countBodyChildren() {
      var body_element = document.getElementsByTagName("body")[0];
      alert(body_element.childNodes.length);
}

 window.onload = countBodyChildren;

The function runs fine, but when I add () to the end of the function name i.e. window.onload = countBodyChildren(); the function does not run. Why is this? I thought to call functions, even if they don't need any parameters, you always add the () to the end of its name.

Answer 1

I thought to call functions, even if they don't need any parameters, you always add the () to the end of its name.

You thought correctly. But here, you don't want to call the function; you want to tell the browser which function to call when the time comes.

When you add the parentheses, you will call the function, immediately (not on load). The function executes; tries to look up the body elements, but there is none loaded yet; so you body_element ends up as undefined. You look up childNodes on undefined, and get an error. window.onload assignment does not happen.

Even if your function did not throw an error, it would have returned undefined, so window.onload becomes undefined, so nothing happens when the page is finally loaded.

Instead, you need to start thinking that functions are just another kind of value. When you say

function a() {
  // ...
}

it is the same as this:

a = function() {
  // ...
};

(Actually there are differences, important ones, but they're irrelevant for now; look them up when you have the basics down pat). A function is now "contained" in variable a. Then you can do this:

var b = a;
b();

and it will work - you're putting whatever was in a (your function) into the variable b, and then executing it by invoking its new name (since now both a and b refer to the same function). In the same way, after

window.onload = countBodyChildren;

the onload property of the window object now contains your function. Browser will then execute whatever is there when the load finishes.

You had a case of premature execution.

Answer 2

What window.onload expects is a reference to a function or a function definition.

When you put parenthesis, you actually execute the function and it is the return value of the function that is assigned to window.onload.