1

I have been using jQuery for a year, but I still don't understand how this code works:

alert($('#elementID').val()); // It gets the value of element

$('#elementID').val('setting Value'); // the same function is setting value

some other functions of jquery also do the same like .html()

I want to know how this thing is achieved? How do they overload a javascript function?

Improve this question
3
  • 3
    It just checks to see if a value is given in the function, if not it retrieves the current value ? Commented Aug 25, 2012 at 9:56
  • @adeneo yes it is does so but how thing happens , I dont know any technique to do so with the same function Commented Aug 25, 2012 at 9:59
  • Hmm, in C++, we can use default parameters to mimic overloading, and here, optional parameters for javascript. Commented Aug 25, 2012 at 11:44

5 Answers 5

Reset to default
8

There are no overloads in javascript, so feats like this are performed using optional parameters. JavaScript allows you to call functions without specifying parameters. For example:

function val(text)
{
  if (arguments != null && arguments.length > 0) {
    alert("i'm setting value here to " + text);
  } else {
    alert("i'm getting value here");
  }
}

val(); // alerts value getter
val('hi!'); // alerts value setter and the message

This example was written to point out arguments collection which you get in every function. Every function can fetch it's parameters as a collection and can accordingly perform it's logic. However, displayed example would be written differently in real world:

function val(text)
{
  if (typeof text === "string") {
    alert("i'm setting value here to " + text);
  } else {
    alert("i'm getting value here");
  }
}

Each parameter which you do not pass to a function gets "value" of undefined (not null). This lets you use the shortest logical expression. You can use any value in if statement. Variables which are null or undefined will simply be evaluated as false.

As a comment below pointed out if text parameter is empty string if (text) would return false. For that reason, for text parameters check parameters by type.

It would be beneficial for you to also read about null and undefined differences.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

in your first code snippet var "arguments" is it a default keyWord? or where you defined it ?
Arguments is default keyword. I also provided link to Mozilla Developer Network where you can read about it.
@Rupesh: They wrote "This example was written to point out arguments collection which you get in every function. Every function can fetch it's parameters as as collection and can accordingly perform many operations.". There is already a link (see the blue text?) that you can follow to learn more about arguments.
Empty string and 0 are also evaluated as false, so in your second example you can't set value by calling val(0)
@RupeshPatel, here is a link for arguments.
5

It's simply done by checking if the function was called with a parameter or not 

function stuff(moreStuff){
   if(typeof moreStuff === "undefined"){
      return originalStuff;
   }else{
      setStuff(moreStuff);
   }
}
Improve this answer

2 Comments

so there is no overloading concept in JS but we can do some work around, Thanks for reply :)
It is safe to write if(moreStuff === undefined) in this example because moreStuff is an argument. stackoverflow.com/questions/4725603
3

Very simple, just check if the variable has a value:

function foo(param) {
    // Method 1
    if (param != null) {
        // Parameter is defined
    } else {
        // No parameter (or null given)
    }

    // Method 2
    if (arguments.length > 0) {
        // At least one argument has been defined
    }
}
Improve this answer

6 Comments

+1 for the second option. But your param != null may not work as intended - see saladwithsteve.com/2008/02/javascript-undefined-vs-null.html
this doesn't work null will not match with param if called lie this foo()
@techfoobar I'm aware of that, but the check as implemented in my code above simply allows only parameters that are not undefined and not null.
@RupeshPatel Yes, it will. If you do foo(), param will be undefined - and undefined == null is true.
@Niko As per I know undefined is the type and null is an object itself
|
1 
function foo(value)
{
     if(typeof value != 'undefined')
     {
         // calling foo(2332)
     }
     else
     {
         // foo()
     }
}
Improve this answer

1 Comment

Your param name is value and you're checking against yourvar!
1

As nearly everyone else mentioned, they did not overload the parameter, but in the first statement, there is not arguments provided for the function. In the second one though, an argument has been provided. Therefore a simple check typeof something == "undefined" could easily modify and set apart the different results.

This is the relevant jQuery code making up the .val() function (version 1.8.0):

val: function( value ) {
        var hooks, ret, isFunction,
            elem = this[0];

        if ( !arguments.length ) {
            if ( elem ) {
                hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];

                if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
                    return ret;
                }

                ret = elem.value;

                return typeof ret === "string" ?
                    // handle most common string cases
                    ret.replace(rreturn, "") :
                    // handle cases where value is null/undef or number
                    ret == null ? "" : ret;
            }

            return;
        }

        isFunction = jQuery.isFunction( value );

        return this.each(function( i ) {
            var val,
                self = jQuery(this);

            if ( this.nodeType !== 1 ) {
                return;
            }

            if ( isFunction ) {
                val = value.call( this, i, self.val() );
            } else {
                val = value;
            }

            // Treat null/undefined as ""; convert numbers to string
            if ( val == null ) {
                val = "";
            } else if ( typeof val === "number" ) {
                val += "";
            } else if ( jQuery.isArray( val ) ) {
                val = jQuery.map(val, function ( value ) {
                    return value == null ? "" : value + "";
                });
            }

            hooks = jQuery.valHooks[ this.type ] || jQuery.valHooks[ this.nodeName.toLowerCase() ];

            // If set returns undefined, fall back to normal setting
            if ( !hooks || !("set" in hooks) || hooks.set( this, val, "value" ) === undefined ) {
                this.value = val;
            }
        });
    }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.