JavaScript methods, calling method without parentheses

Question

Hello there I have a question with the that I need some help with to increase my knowledge and understanding of JavaScript.

Within my init method please look at this particular line with the .on method where I am saying when button is clicked we’re going to refer to the contactForm object by using the this keyword and then we’re going to call the .show method.

.on( 'click', this.show );

Now the question is – if show is a method, then why aren’t we doing this, why aren’t we calling the method like this?

  .on( 'click', this.show() );

Am I correct in saying it’s because we don’t want to call the show method immediately, if JavaScript came across the init method would parse all of this code, and then it would come to this section right here – this.show() - and it would immediately execute this function. But I don’t want it to do that, I only want that function to be called on the condition that the corresponding button is clicked.

When the show method is written as this.show does the absence of the parentheses stop the show method from automatically executing ?

var contactForm = {
        init: function() {
            $('<button></button>', {    
                text: 'Contact Me!'  
            }) 
                .insertAfter('article:first')
                .on( 'click', this.show() );
        },

        show: function() {
            console.log('showing');
        }

Sorry if I haven't been descriptive enough or accurate enough with my terminology. Any succinct and clearly explained answers would be massively appreciated.

Answer 1

Yes, what you are describing is correct, however, you're looking at it the wrong way.

It seems, as if you regard function names without parentheses to be some sort of special case, but in reality, it's the other way around.

It is important that you understand the concept of expressions and operators.

Operators

() is a regular operator, as is - for example, which negates a value. Operators are always applied to values: -5 negates the value 5, -(-5) negates the expression (-5) which is 5 again.

() on the other hand tries to call the expression to its left as a function: expr().

Functions are values

Functions in JavaScript are values that you can pass around just like you can wit the value 5:

var five = 5;
var returnFive = function() { return 5; };
var five2 = five;
var returnFive2 = returnFive;
alert(five2);
alert(returnFive2());

There's really nothing more to it: functions are just values, that happen to support some special magical () operator that "calls" them.

For this reason, it's perfectly valid to do any of

• show()
• (show)()
• ((show))()

etc, because (expr) simply evalutes to expr.

Evaluating expressions

Operators take one or multiple values, operate on it, and yield some other value:

4            // No operator, expression evaluates to 4
4 + 4        // This expression evaluates to 8
returnFive   // No operator, expression evalutes to the function value
-5           // Unary operator, takes one value, negates it
returnFive() // call operator, executes the function, evaluates to its return value

What I hope you take away from this is, that functions aren't that special, there is no intrinsic connection between show and that pair of parentheses.

When the show method is written as this.show does the absence of the parentheses stop the show method from automatically executing ?

Yes and no – This suggests that show without the () is a special case to be handled separately, but that's not true. It's like saying "-5 is more normal than 5" and the absence of - makes something a positive number. It's the other way around, however: 5 is the "default", if you will, and -5 the special case. It's the same thing with show.

Applying this to your example

The on() function expects to be given some sort of callback, i.e. a function. If you pass show(), what are you passing? The evaluated expression show(). What is this? Whatever show() returns, of course. As such, on() has "no idea" that you have done something with show(), all it gets is some value without a connection to show().

Of course, the show() function might itself return a function, because, as we have learned, functions are just values like 5 and "foo" that can be passed around.

In that case, the on() function is still being passed a function which will be called on the corresponding event.