Setting a variable equal to a function without parenthesis?

Question

I was following a tutorial on AJAX, and the person making the video did something strange. At least I hadn't seen it before. They set an object property equal to a function name, but without the familiar (). He later went on to define the function. Code is provided below for context. Anyway, what does it mean to set something equal to a function without the parameters? That line of code is indeed running the function that is named that as you can see below.

xmlHTTP.onreadystatechange = handleServerResponse;

There's a function called "handleServerResponse()", that this line actually runs. I can post it, but I think it's irrelevant. It's just a normal function function handleServerResponse(). Any explanation would be greatly appreciated! Thanks! ~Carpetfizz

EDIT: Adding () to the end of that line, creates errors, as well as changing it.

T.J. Crowder · Accepted Answer · 2013-07-27T11:34:52.350

What they're doing there is referring to the function without calling it.

var x = foo;   // Assign the function foo to x
var y = foo(); // Call foo and assign its *return value* to y

In JavaScript, functions are objects. Proper objects. And so you can pass references to them around.

In that specific case, what they're doing is setting up handleServerResponse as the callback that the XHR object uses when the ready state changes. The XHR object will call that function during the course of doing the ajax request.

Some more examples:

// Declare a function
function foo() {
    console.log("Hi there");
}

// Call it
foo();        // Shows "Hi there" in the console

// Assign that function to a varible
var x = foo;

// Call it again
x();          // Shows "Hi there" in the console

// Declare another function
function bar(arg) {
    arg();
}

// Pass `foo` into `bar` as an argument
bar(foo);     // Shows "Hi there" in the console, because `bar`
              // calls `arg`, which is `foo`

It follows on naturally from the fact that functions are objects, but it's worth calling out specifically that there's no magic link between x and foo in the above; they're both just variables that point to the same function. Other than the fact they point to the same function, they're not linked in any way, and changing one (to point at another function, for instance) has no effect on the other. Example:

var f = function() {
    console.log("a");
};

f(); // "a"

var x = f;

x(); // "a"

f = function() {
    console.log("b");
};

f(); // "b"
x(); // "a" (changing `f` had no effect on `x`)

You might want to further explain that after doing `x=foo`, you can later do `x()`. — Bryan Oakley, Jul 27 '13 at 11:12
It might also be worth noting that if you would change the `foo` function after assigning it to `x`, the `x` function will still be the same (it will not inherit changes after assignment). — David Hellsing, Jul 27 '13 at 11:26
Thank you very much for your answer. I also learned a lot from @dystroy, but this answer was more prevalent for future readers searching for the title of my question. — Carpetfizz, Jul 27 '13 at 11:27

score 1 · Answer 2 · answered Jul 27 '13 at 11:10

When the state of the request changes (for example when the browser received the complete answer), the browser will call a function stored in the onreadystatechange property of the xmlHttpRequest. This call will be something like

xmlHTTP.onreadystatechange();

which will be just equivalent to

handleServerResponse();

To decide what function will be called, you assign this function (not the returned value of this function) to this property using the line you show.

This is possible because JavaScript is a language where functions are said first class : they may be property values just like objects, strings, etc.

score 1 · Answer 3 · answered Jul 27 '13 at 11:10

It means you are assigning the variable a reference to that function. The reference then can be used to call the function instead. Something like this...

function foo(){
    alert("I am inside foo");
}

var bar = foo; // bar now points to foo

// Call foo
foo();// alerts "I am inside foo";

// Call bar which is pointing to foo
bar();// alerts "I am inside foo";

Setting a variable equal to a function without parenthesis?

3 Answers3

Linked

Related