5

It's practical to have the last parameter with a default value, as follows.

function add(x, y = 5) {
    return x + y;
}

console.log(add(3)); // results in '8'

However, is it possible to have other than the last parameter with a default value? If so, how would you call it with the intention of using the first default value, but providing the second parameter?

function add(x = 5, y) {
    return x + y;
}
    
console.log(add(,3)); // doesn't work
Grateful
  • 9,685
  • 10
  • 45
  • 77
  • 1
    `add(undefined, 3)` but it's hardly better. I think there is a proposal for `add(,3)` syntax but it's definitely not in yet. – VLAZ Jul 29 '20 at 03:43
  • Ahaaaa! Brilliant. So, I could have several parameters and interweave them with default values if necessary! Thanks!! – Grateful Jul 29 '20 at 03:44
  • 1
    [This is usually a better way](https://stackoverflow.com/questions/11796093/is-there-a-way-to-provide-named-parameters-in-a-function-call-in-javascript) to go about it if you have many parameters. It doesn't really serve much purpose to have many optional parameters and only supply values to the last ones. Your function calls tend to look really horrible `doSomething("param", 2, undefined, 42, "hello", undefined, true)` is pretty annoying to read and maintain. – VLAZ Jul 29 '20 at 03:46
  • @Grateful `undefined` will do, but what's your purpose using this method? – Shiz Jul 29 '20 at 03:47
  • You could curry your arguments: `const add = (x=5) => y => x+y;`. Then use your function like so `add()(3)` – Nick Parsons Jul 29 '20 at 04:09
  • What on earth just happened there? :) – Grateful Jul 29 '20 at 04:12
  • 1
    I'll look into... – Grateful Jul 29 '20 at 04:12

2 Answers2

1

You still need to provide the first parameter regardless of its default value.

Try destructuring a single parameter instead, like this:

function add({ x = 5, y }) {
    return x + y;
}

console.log(add({ y: 3 })); // results in '8'

You will still have to specify the y key, though, but this is a way better practice.

Andrei
  • 400
  • 2
  • 6
  • 1
    I really like this approach too. It appears to be the more convenient way to use when many parameters are used! Thanks. – Grateful Jul 30 '20 at 05:28
0

You still could keep your add function the same by call it with params from destructed array like below snippet

function add(x = 5, y) {
  return x + y;
}

console.log(add(...[,3]));
hgb123
  • 13,869
  • 3
  • 20
  • 38
  • I am now learning the idea of 'destructing', but I still don't quite understand how you provided the parameter values `add(...[,3])`. First of all, isn't this destruction only possible within arrays? Secondly, shouldn't the operator be within the array, as in `add([..., 3])`? – Grateful Jul 29 '20 at 04:00
  • 2
    @Grateful this is [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) not destructuring. Also, no - you can also destructure objects. – VLAZ Jul 29 '20 at 04:03
  • 1
    @Grateful you could imagine destructing an array is like put the square (curly for object) brackets away, and three-dot is call spread operator. For example, `Math.max(1,2,3)` and `Math.max(...[1,2,3])` are the same. `[,3]` is equals to `[undefined, 3]` then calling `add(...[,3])` is the same as calling `add(undefined, 3)` – hgb123 Jul 29 '20 at 04:08
  • 1
    After having studied all the suggested topics, I would like to mention what others have highlighted already. Although the code itself is good, the concept mentioned is technically incorrect. Destructuring is a process that involves assigning values after the iterable element has been unpacked. However, in this particular case, there is no assignment going on. The correct term to use is the 'spread syntax' using the `...` operator. Essentially, the provided array is iterated over and expanded into distinct variables. These variables are then passed back as distinct values, not an array! – Grateful Jul 29 '20 at 08:19