Why don't I need the call operator to call functions in JavaScript?

Question

Quite Simply, I'd like to now why is it that sometimes you don't require the call operator () for a Function invocation?

This is what I normally do:

function startUp() {
  alert("started");
}

// and later...
startUp(); //to call it, this will actually trigger the alert

//If I do this
startUp; //It prints the function in the a Browser's console, but won't call the function

Now, If I attach the function to a Browser event:

 <script>

    function startUp() {
      alert("started");
    }

    window.onload = startUp; //I don't need the () to call the Function! WHY is that??

  </script>

As I mention in the comment, why is it that I sometimes don't need the () to call a function? (like in this case)

Thank you in advance for your explanations.

Answer 1

window.onload = startUp;

This is not you calling the function. Instead, you pass a reference to your function as a handler for the onload event of the window. When an event is fired, all the handlers associated with it get called (and that is when the function is executed).

Consider the following piece of code:

function foo() {
  console.log('I am fired');
}

function run(func){
  func();
}

var bar = foo; // nothing is called on this line
run(bar); // bar is not called on this line. It is called in run().
run(foo); // same thing.

For your example, window.onload = startUp , the browser is the one that triggers the callback (as with all the browser events, timeout callbacks, etc). The startUp function will be called by the browser when the page content has loaded (HTML, referenced CSS, referenced images, etc).

Also interesting to note is that the function can be called with parameters. Browser events usually call it with this being the element that triggered the event (in this case it should be window) and the first parameter the event that was fired. If you want to replicate that, it would look something like this:

function fireCallbacks(element,callbacks){
  var event = new Event();
  for (var i=0; i<callbacks.length; i++) {
    callbacks[i].call(element, event);
  }
}

fireCallbacks(window, [startUp]);

Function.prototype.call is used to execute a function with a specific this value and parameters.

Answer 2

You aren't calling a function in your window.onload = startUp; example, you are assigning the function, by name, as the event handler for the onload event.

Answer 3

You don't call the function in the second case at all. Instead, your browser will handle window.onload similarly to the following code:

// call after document has been loaded
if(typeof(window.onload) === "function"){
    window.onload();
}

As you can see, window.onload gets actually called, and since window.onload === startUp , you have the same effect as startUp() when the document has been loaded completely.

Answer 4

You are not calling anything. window.onLoad is called when the page is loaded. You are merely changing which function will be called at startup (and not calling it yourself or it would be run twice).

Answer 5

 window.onload = startUp; //I don't need the () to call the Function! WHY is that?? 

Because you're not calling it. You're just setting a reference to that function.

Your browser will later call window.onload() .

Answer 6

It took me a while to understand the following fact: Functions in javascript are objects .

as an example of this concept I leave you some code to play around with

function fn1(obj) {
  alert(obj&&obj.callerName?obj.callerName:'no caller');
}
h1 = fn1;// make a token out of a defined function
h1();    // and call the token

// make a token that holds an object that happens to be a function
fn2 = function () {
  alert('I am a function that is saved into a token\nI am an object that can be called and passed around');
  fn1(this);
}
// call it and pass it around
fn2();

// make an object that has a key that points to an object that happens to be a function
object1 = {
  callerName : 'object',
  fn3 : function IwillBeAttachedToAnObject() {
    alert('what is the value of `this`?');
    fn1(this);
  }
}
h2 = object1.fn3;
h2(); // what should this give us
object.fn3 // compare to last call

// let's change the value of `this` inside this function...err, object
fn2.call(object1)

// let's add a new function to our object
object1.newFunction = fn1;

Sorry for the late submission, my internet just up and died