CODEWITHSUNDEEP
javascriptjqueryfunctionobject
Star Light
Star Light

Reputation: 174

how to set parameter as an object in JavaScript function

[Notes: all the code below use JavaScript with jQuery + jQuery-UI framework]

I mean, usually JS function parameters is just variable. So all we can do is set it like this:

function x(parameter1, parameter2, parameter3, etc...) {/* code inside */}

But it doesn't like I could all use all of parameter that I've set. For example:

function flipCard(front, back, effect, option, duration) {
    $(front).click(function() {
        $(front).hide(effect, option, duration, function(){
            $(back).show(effect, option, duration)
        });
    });
}

You see, option is a very rare parameter that I could use. But the duration is alway used, I did consider a changing position of those parameters. However, it seem like I can do it forever so I think about using parameter as an object. I try many way I could think:

function t(obj = {x,y,z}) {/* code inside */} //Absolutely fail

Try again:

function t({}) {/* code inside */} //Ok, I give up

Do you have any idea to deal with this problem?

Upvotes: 0

Views: 1856

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074028

You have a couple of choices:

  1. Use an "options" object:

    var xDefaults = {
    effect: "slide",
    option: "some default",
    duration: "slow"
};
function x(options) {
    options = $.extend({}, xDefaults, options);
    $(options.front).click(function() {
        $(options.front).hide(options.effect, /*... and so on... */);
    });
}

    Usage:

    x({front: "#foo", effect: "fade"});

    Very clear; a bit clunky to use.

  2. Detect when the function is called what kinds of options you have:

    function x(front, back, effect, option, duration) {
    if (/*...figure out that `option` is really `duration`...*/) {
        duration = option;
        option = null/*...or some default...*/;
    }
    $(front).click(function() {
        $(front).hide(effect, /*... and so on... */);
    });
}

    It can be quite awkward to figure out which optional arguments have been supplied, but this is how jQuery does it for the majority of its functions. You can look at the types of the actual arguments you got, look at the magic arguments pseudo-array to know how many actual arguments you got, etc.

Upvotes: 1

honerlawd
honerlawd

Reputation: 1509

I think this is what you are asking about....

In your flipcard you would have to check if the required stuff is passed though and if not output an error.

However, your code is not the best way to handle a situation...

function flipCard(obj) {
    $(obj.front).click(function() {
        $(obj.front).hide(obj.effect, obj.option, obj.duration, function(){
            $(obj.back).show(obj.effect, obj.option, obj.duration)
        });
    });
}

//Call flipCard with an object
//obviously set your values as needed
flipCard({
  front : undefined,
  back : undefined,
  effect : undefined,
  option : undefined
  duration: undefined
});

Upvotes: 2

Related Questions