Difference of calling a function with and without parentheses in JavaScript

Question

I was handling a JavaScript file upload event. And I have the following initializer and the following function:

Initializer

    $('#s3-uploader').S3Uploader({
        allow_multiple_files: false,
        before_add: progressBar.show,
        progress_bar_target: $('.upload-progress-bar'),
        remove_completed_progress_bar: false
    }).bind("s3_upload_complete", function(e, content) {
        console.log(content);
    });

Function

var progressBar = {
    show: function() {
        $('.upload-progress-bar').show();
        return true;
    }
}

In the initializer, I noticed there is a difference if I do

before_add: progressBar.show v.s. before_add: progressBar.show(). With the parentheses, it will be called once even if it is bound to the before_add option, and without the parentheses it will not.

Is there an explanation for the behaviour I observed?

Answer 1

With parentheses the method is invoked because of the parentheses, and the result of that invocation will be stored in before_add.

Without the parentheses you store a reference (or "pointer" if you will) to the function in the variable. That way it will be invoked whenever someone invokes before_add().

If that didn't clear things up, maybe this will help:

function Foo() {
    return 'Cool!';
}

function Bar(arg) {
    console.log(arg);
}

// Store the >>result of the invocation of the Foo function<< into X
var x = Foo();
console.log(x);

// Store >>a reference to the Bar function<< in y
var y = Bar;
// Invoke the referenced method
y('Woah!');

// Also, show what y is:
console.log(y);

// Now, try Bar **with** parentheses:
var z = Bar('Whut?');

// By now, 'Whut?' as already been output to the console; the below line will
// return undefined because the invocation of Bar() didn't return anything.
console.log(z);