Optional parameters

JavaScript has no syntax that allows you to have a default value for a function parameter as you often do in most other languages. This is scheduled for a future version of ECMAScript, but for now you have to take care of this yourself inside the body of your function.

There are several patterns that do the job, but here's a new one. It was suggested to me by Andrea "WebReflection" Giammarchi in his technical review of the upcoming JS4PHP book.

Andrea doesn't remember blogging about this pattern and I don't remember ever seeing it. So here goes.

Say you have a function with all 4 default parameters, mimicking for example PHP's declaration:
function sum($a = 1, $b = 2, $c = 3, $d = 4) ...

function sum(a, b, c, d) {
  // note no `break` needed
  switch (arguments.length) {
    case 0: a = 1;
    case 1: b = 2;
    case 2: c = 3;
    case 3: d = 4;
  }
  return a + b + c + d;
}

Test:

sum();            // 10
sum(1);           // 10
sum(11);          // 20
sum(1, 2, 3, 24); // 30
sum(11, 22);      // 40

Obviously this doesn't work when you have an optional param, followed by a required one, but that's just bad design.

Thoughts?

9 Responses to “Optional parameters”

  1. stoimen Says:

    Looks nice and clean, although it’s difficult to read at first. Like it!

  2. ricktap Says:

    I think anything not obvious is bad code. Although as someone working often with switch cases, I can tell what’s going on, different implementations in other languages make it a mess.
    Ruby i.e. doesn’t use break statements at all and breaks automatically. Of course that’s nothing to worry about for a JS developers, but I think taking those things in to account, makes this an ambiguous answer.

  3. JSSpy » Optional parameters Says:

    [...] Source: http://www.jspatterns.com/optional-parameters/ [...]

  4. JSSpy » Optional parameters Says:

    [...] Source: http://www.jspatterns.com/optional-parameters/ [...]

  5. Chris Heilmann Says:

    I find it irksome to have lots of parameters in a function as you’ll always have to name them sensibly and have issues with omitting some of them. It is bad enough that PHP itself is riddled with that. In JS I tend to have two parameters tops and if it is more, sending an object in makes more sense as it has all of them optional, gives you more obvious naming and reference and makes the order of no importance.

  6. Dan Says:

    I understand that it might be hard to read at first, but so are many other design patterns; such at the Template pattern or Visitor pattern. The whole idea of defining a pattern is so it becomes recognizable and solves a problem efficiently. This solution is elegant and quickly recognizable once the pattern has been learned. I say well done.

  7. Flávio Medeiros Says:

    What about this:

    // https://gist.github.com/Sigmus/4773187

    function sum(a, b, c, d) {
    a = a || 1;
    b = b || 2;
    c = c || 3;
    d = d || 4;
    return a + b + c + d;
    }

  8. Stephen Says:

    @Flavio will sum(0, 0, 0, 0) work?

  9. Flávio Medeiros Says:

    I see; it doesn’t. Thanks.

Leave a Reply