Using parenthesis when calling a function

Question

I have written a function and intend to call it in several circumstances. Here is the function:

var responsive = function(){
    $('#menuicon').toggleClass('menuicon-res');
    $('.fixed-menu-item').toggleClass('res');
}

In a certain case, calling the function works only when written WITHOUT parenthesis after it:

$('#menuicon').click(responsive);

In another, similar case, calling the function works only when written WITH parenthesis after it:

$('#top').click(function(){
    $('html, body').animate({scrollTop: 0},500);
    responsive();
});

I think I understand that the first case (w/o parenthesis) returns the function for callback, and the second case (w/ parenthesis) returns the output of the function. Can anyone help explain why the way to call my function changes in these two scenarios?

Thanks;

CPR

Using parens calls the function. Without them it's just a function reference. — Dave Newton, Jul 20 '16 at 23:33
Analogously, consider the difference between `var foo = responsive` and `var foo = responsive()`. — apsillers, Jul 20 '16 at 23:36

score 3 · Answer 1 · answered Jul 20 '16 at 23:35

3

In the first scenario you are assigning the function to be run on your click event, and the click event will do the calling. In the second scenario you are calling the function yourself.

answered Jul 20 '16 at 23:35

Cameron637

1,659
13
21

thank you. that explains it – CandyPaintedRIMS Jul 20 '16 at 23:36
I'd also note the fact that `var responsive = function(){...};`. So, you can literally use `responsive` and `function(){...}` interchangeably (simple algebraic concepts). – Sam Jul 20 '16 at 23:37

score 2 · Answer 2 · answered Jul 20 '16 at 23:35

The first case you are talking about is hooking up your function as an event listener, which will call the passed function when an event is triggered

//this will execute when "#menuitem" is clicked
$('#menuicon').click(responsive);

Your second case you are calling it yourself, here just putting responsive without actually invoking it will do nothing.

$('#top').click(function(){
    $('html, body').animate({scrollTop: 0},500);
    responsive();
});

Using parenthesis when calling a function

2 Answers2