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.

Check out this... http://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname. Functions can be set as a variable in JS — ryan0319, Dec 10 '13 at 16:01
Without brackets it is a function reference. The browser console just logs the reference when you do `startUp;`. — A1rPun, Dec 10 '13 at 16:03
Passing by value, passing by reference and calling a function, different things for different circumstances — adeneo, Dec 10 '13 at 16:04
It took me a while to understand the following fact: **Functions** in javascript **are** ***objects***. — hanzo2001, Dec 10 '13 at 16:30
when you assign a function to an event (just like any other assignment like a=123), the event emitter will use the "()" form internally when needed so you don't have to. — dandavis, Dec 10 '13 at 16:30

score 3 · Accepted Answer · edited Mar 08 '14 at 19:25

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.

Great, Sir, this I understand just fine, could you perhaps put in code an answer that depicts when in my example would startUp() actually happen? — jlstr, Dec 10 '13 at 16:12
Hopefully i didn't go overboard with the explanations to confuse you more. — Tibos, Dec 10 '13 at 16:27
Not at all sir, this is by far the best explanation of them all. — jlstr, Dec 10 '13 at 16:35

score 1 · Answer 2 · edited Mar 08 '14 at 19:10

1

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.

edited Mar 08 '14 at 19:10

BenMorel

34,448
50
182
322

answered Dec 10 '13 at 16:01

Maess

4,118
20
29

score 1 · Answer 3 · answered Dec 10 '13 at 16:01

1

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.

answered Dec 10 '13 at 16:01

Zeta

103,620
13
194
236

This code example is great, But I'm not sure if it's safe to say that inside the if, you'd actually have startUp() instead of window.onload()? Or am I missing something? – jlstr Dec 10 '13 at 16:08
@JoseE: Doesn't matter, `startUp === window.onload` at that point (except if you assign some other function to `window.onload`) – Zeta Dec 11 '13 at 04:42

score 1 · Answer 4 · answered Dec 10 '13 at 16:01

1

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).

answered Dec 10 '13 at 16:01

Pierre Arlaud

4,040
3
28
42

I just changed window.onload = startUp; for window.onload = startUp(); and the effect is the same. I'm confused – jlstr Dec 10 '13 at 16:14
By writing `window.onload=startUp();` you are calling startUp once and putting "undefined" in window.onLoad (because your function returns nothing). Maybe this will help: http://stackoverflow.com/questions/6219687/why-windows-onload-is-executed-several-times – Pierre Arlaud Dec 10 '13 at 16:20
The example from that question, I'm not sure if it applies to what I'm currently dealing with, as it literally calls the function twice, and you can actually see it from looking at the code. Maybe I'll review it a bit further though, I'm no JS expert by any means. Thanks! – jlstr Dec 10 '13 at 16:37
1

@JoseE Let me try to clarify that by an example. If you write this: `x = function() {alert('test'); return x;}; window.onload=x();` it is called twice. – Pierre Arlaud Dec 10 '13 at 16:43

score 1 · Answer 5 · answered Dec 10 '13 at 17:26

1

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().

answered Dec 10 '13 at 17:26

Lightness Races in Orbit

378,754
76
643
1,055

score 0 · Answer 6 · answered Dec 10 '13 at 17:26

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

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

6 Answers6