Javascript Functions With Default Params

I currently use the following function which checks the three params to see if there are any passed through, is this the best way to do this whilst setting a default if no paramete

Solution 1:

I think you have forgot that parameters always have to be entered in order... Here your first parameter is the time in milliseconds for your timeout, and the second parameter is the slideshow element. If you ommit your time completemy, the slideshow element will be the first parameter, so be treated as your time by the function.

One way jQuery uses to counter this is the use of one option parameter. This consist of passing an object for the function to use, this would look like that:

functionsetupSlideshow(options) {
    options = options || {};
    e = options.e || '.slideshow';
    s = options.s || '> li';
    t = options.t || 70;
    $timeout(function() {
        $(e).cycle({
            swipe: true,
            slides: s,
            fx: 'scrollHorz',
            pager: '.cycle-pager',
            timeout: 0
        });
    }, t);
}
setupSlideshow({t:70});
setupSlideshow({e:'.new-slideshow'});
setupSlideshow({e:'.new-slideshow',s:'.slide'});

Using this technique is useful for this kind of usage but may become a problem maker too when too many options are possible and not well documented so keep it clean and commented :)

Solution 2:

Parameters must be passed to a function in the same order that they are defined. So;

setupSlideshow('.new-slideshow');

The parameter here is being passed to the t variable in your function.

What you want to do is this:

setUpSlideshow(false, '.new-slideshow', '.slide');

this will pass false to the t variable and it will get changed to your default value.

Alternatively, you may want to consider using an 'options'/'arguments' object... :

functionsetupSlideshow(args) {
    e = e in args ? args.e : '.slideshow';
    s = s in args ? args.s : '> li';
    t = t in args ? args.t : 70;
    ...
}
args = {
    e: '.new-slideshow',
    s: '.slide'
};

setupSlideshow( args );

Solution 3:

Old way of function with default params like this:

functionx(param1, param2){
  param1 = param1 || 'param1_default';
  param2 = param2 || 'param2_default';
  console.log(param1, param2);
  //etc
}

Better way like this:

Using function destruction and defaults

function x({param1='param1_default', param2='param2_default'}={}){
  console.log(param1, param2);
//etc
}

x(); //returns 'param1_default', 'param2_default'
x({}); //returns 'param1_default', 'param2_default'
x({param1:'a'}); //returns 'a', 'param2_default'
x({param1:'a', param2:'b'}); //returns 'a', 'b'

What is actually happening here is we do destructuring from argument. If no arguments provided than default one is used - which is = {}. And in that case because default empty object doesn't have fields, destructuring will take default values.

Solution 4:

As far as my limited JS goes, I think I've got this one.

Currently where you write e = e || '.slideshow'; you're trying to access e as a variable, however, the browser is interpreting that as an argument. Change it to the following:

var e = e || '.slideshow', s = s || '> li', t = t || 70;

Solution 5:

Look at the below implementations. With the default params 'features = []' in place, the code can be made highly concise in ES6.

ES6: new

function setUserAccess(features = []){
    return features;
};

setUserAccess(); // []

ES5: old

functionsetUserAccess(features){
    features = features || [];
    return features;
};

setUserAccess(); // []