I'm trying to pass an optional argument to a javascript function from jQuery. In the below example the function receiving the argument is 'foo'. It works fine with the second bit of jQuery which passes the argument. The first bit of jQuery doesn't have any arguments that I pass in, but jQuery still seems to pass an object.

Ultimately I want 'bar' to be an optional parameter, and set to 0 if I don't pass anything in.

    //jQuery Bit #1       
    $('#id').change(foo);

    //jQuery Bit #2
    $('#id2').click(function(e){
            var bar = $(e.target).text();
            foo(bar);
          });

    function foo(bar) {
            if (!bar) var bar = 0;
           //do stuff here
          }

Since jQuery is passing in an object should I just pass 'bar' in as an object and check for it as an attribute of the object? Or am I missing something that jQuery does or that I should be doing with jQuery in this situation?

I'm trying to pass an optional argument to a javascript function from jQuery. In the below example the function receiving the argument is 'foo'. It works fine with the second bit of jQuery which passes the argument. The first bit of jQuery doesn't have any arguments that I pass in, but jQuery still seems to pass an object.

Ultimately I want 'bar' to be an optional parameter, and set to 0 if I don't pass anything in.

    //jQuery Bit #1       
    $('#id').change(foo);

    //jQuery Bit #2
    $('#id2').click(function(e){
            var bar = $(e.target).text();
            foo(bar);
          });

    function foo(bar) {
            if (!bar) var bar = 0;
           //do stuff here
          }

Since jQuery is passing in an object should I just pass 'bar' in as an object and check for it as an attribute of the object? Or am I missing something that jQuery does or that I should be doing with jQuery in this situation?

• javascript
• jquery

• since bar() doesn't return anything example is really hard to figure out what you are wanting, or asking... and var bar in click handler is a string, so really confused about object issue – charlietfl Commented Mar 6, 2012 at 17:21

3 Answers 3

Here jQuery is passing the event object into the click call back which is by design. If you want to have the jQuery invoke the callback without an argument then you need to wrap it in a lambda and explicitly not pass an argument

$('#id').change(function() { foo(); });

Two options: Either always pass the event object, or never do:

Always:

//jQuery Bit #1       
$('#id').change(foo);

//jQuery Bit #2
$('#id2').click(function(e){
        var bar = $(e.target).text();
        foo(e, bar);       // <== Note change here
      });

function foo(e, bar) {
        if (!bar) bar = 0; // <== no "var" on this line
      }

Never:

//jQuery Bit #1       
$('#id').change(function() { foo(); } ); // <=== Note change here

//jQuery Bit #2
$('#id2').click(function(e){
        var bar = $(e.target).text();
        foo(bar);
      });

function foo(bar) {
        if (!bar) bar = 0; // <== no "var" on this line
      }

Note that you don't use var anywhere in foo to declare bar. bar is an argument, but you can assign to it.

FWIW: Also note that in your example, bar will either be a string (the text of the target element) or a number (0). That kind of inconsistency can bite you, you might consider using parseInt or parseFloat where you're getting the text (assuming it should always be a number):

var bar = parseInt($(e.target).text(), 10); // 10 = I'm assuming decimal

var bar = parseFloat($(e.target).text());   // parseFloat always assumes decimal

If there is no text, or it's not a parseable number, bar will be NaN and the code in foo will make it 0 (because !NaN is true).

I believe your code will work if you rewrite the function as

EDIT: the code has been fixed.

//jQuery Bit #1       
$('#id').change(foo); // will be effectively invoked as "foo(event, undefined)"

//jQuery Bit #2
$('#id2').click(function(e){
        var bar = $(e.target).text();
        foo(null, bar);
      });

function foo(unusedEvent, bar) {
        bar = bar || 0;
       //do stuff here
}