Calling parameter-less functions in JS - func() vs. func

[fuzzybabybunny]

$(document).ready(function() { 
  
  var alertShit = function() {
      alert("Shit.");
  }
    
  $("#alert").on("click", "button", alertShit() );
    
});

When I run this the function alertShit runs immediately on page load, NOT when the button is actually pressed. I thought func() with empty parenthesis was the correct way to call a function with no parameters?

$(document).ready(function() { 
  
  var alertShit = function() {
      alert("Shit.");
  }
    
  $("#alert").on("click", "button", alertShit );
    
});

When I run *this* code and call the function with alertShit instead of alertShit(), it runs on button press.

What's going on?

Why is it that I have to call no-parameter functions with () everywhere else but in here I can't add the ()?

 

[BrightCandle]

When you type alertShit() what happens is the function is run right away, and the result of it (null return) is passed into the on function. However when you type alertShit you are passing a reference to the function instead, the function isn't run instead its an object representing the function that is passed.

There is one other example you might be interested in and that is this one:

  $("#alert").on("click", "button", function() {alertShit();} );

This will basically pass an anonymous function into the on method. We can call an anonymous function immediately if we like like the following:

function() {alertShit();}();

See how this works? Function names with () on them means "call the function", without the () on them it means pass the function itself.

 

[Ken g6]

Simply, "func()" invokes the function, while "func" returns a function pointer, more or less.

Instead of referring to data values, a function pointer points to executable code within memory. When dereferenced, a function pointer can be used to invoke the function it points to and pass it arguments just like a normal function call. Such an invocation is also known as an "indirect" call, because the function is being invoked indirectly through a variable instead of directly through a fixed name or address. Function pointers can be used to simplify code by providing a simple way to select a function to execute based on run-time values.

The jQuery on() function attempts to dereference its third argument to call it, later.

Edit: Technically, it looks like JavaScript has first-class functions. Which are like function pointers, but better.

 

[fuzzybabybunny]

Interesting. What about functions that actually have arguments then? For those, you can put in parenthesis and they don't run on load, unlike functions without arguments where you need to make sure to NOT write ()

$('#alert').on('click', 'button', alertShit("Dave", "crap")

 

[nickbits]

A lot if jquery syntax looks confusing if you are not an expert with JavaScript. Suggest writing a JavaScript interpreter using antlr or something. It will open your eyes on how everything works. Part of that is reading and fully understanding the language spec and not relying on trial and error like you are doing now.

 

[BrightCandle]

If a function takes parameters and you pass it as a reference then the part taking the function has to know its expecting a function with a particular list of arguments so it can call it. That is how callback semantics kind of work with function passing. In a type safe language the call itself will say precisely the type of the function required, where the function type is determined by its parameter types and its return type.

If you wanted JQuery to call onto a function that needed to take paramters you would need to make your function return a function that captured the parameters in a closure! Ie alertShit with two string parameters would have to be something like:

  var alertShit = function(a,b) {
     function() {
        alert(a+" " + b);
     }
  }

So its a function returning a function, and you would use it

$('#alert').on('click', 'button', alertShit("Dave", "crap"))