JavaScript functions with default params

Question

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 parameter has been sent?

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

By using setupSlideshow(70); this sets my timeout to 70ms but when it comes to setting the element then using setupSlideshow('.new-slideshow'); doesn't work.

setupSlideshow(70);
setupSlideshow('.new-slideshow');
setupSlideshow('.new-slideshow','.slide');

Do you have any questions or comments or did one of our answers help you? Feedback on or accepting an answer is appreciated. — Bill
– Bill, Commented Dec 4, 2014 at 16:59

Salketer · Accepted Answer · 2014-12-04 15:32:47Z

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:

function setupSlideshow(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 :)

Bill · Accepted Answer · 2014-12-04 15:38:18Z

1

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... :

function setupSlideshow(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 );

edited Dec 4, 2014 at 15:38

answered Dec 4, 2014 at 15:27

Bill

3,52725 silver badges43 bronze badges

Comments

Vitaliy Markitanov · Accepted Answer · 2018-08-29 17:24:38Z

Old way of function with default params like this:

function x(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.

Luke Whitehouse · Accepted Answer · 2014-12-04 15:34:58Z

0

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;

answered Dec 4, 2014 at 15:34

Luke Whitehouse

331 silver badge5 bronze badges

1 Comment

Salketer Over a year ago

Nope, that part is ok. What it does is evaluate the value of "e" if it is true, its value is assigned else the right part will evaluate to true and then be used as the value to assign.

pixlboy · Accepted Answer · 2017-09-15 03:04:45Z

0

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

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

setUserAccess(); // []

answered Sep 15, 2017 at 3:04

pixlboy

1,50213 silver badges30 bronze badges

Collectives™ on Stack Overflow

JavaScript functions with default params

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related