Setting a variable equal to a function without parenthesis? [duplicate]

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.

Answer 1

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