Using destructuring to define optional parameters in ES6

Question

I have a function that performs an AJAX call, as such:

let retrieveData = (section, sectionItem, callback) => {
    ...
}

Where the second parameter is optional, i.e. in some cases that parameter is required, in others it isn't:

let data = retrieveData(aSection, aSectionItem, function(json)) {
    ...
});

and:

let data = retrieveData(aSection, undefined, function(json)) {
    ...
});

In the second instance I'd like to be able to omit the undefined parameter and I believe assigning options/defaults by way of destructuring is the answer (as per this example: https://javascript.info/destructuring-assignment#smart-function-parameters), but I'm coming up short on how to structure the code.

I think it'll be easier when you switch the `callback` and `sectionItem` params. — Thijs, Sep 29 '17 at 07:19
Please avoid designing methods which requires `undefined` and empty functions to skip arguments `retrieveData(aSection, undefined, () => {}, 'something-else', undefined, undefined, 33)`. It's error prone and it's difficult to refactor if one day you decide to remove or change the argument. — Adit Saxena, Dec 26 '18 at 09:59

Serge K. · Accepted Answer · 2017-09-29T07:40:56.003

You current way :

let retrieveData = (section, sectionItem, callback) => {
  console.log('Section :', section);
  console.log('Section item :', sectionItem);
  console.log('Callback :', callback);
}

retrieveData('a', 'b', () => {});
retrieveData('a', undefined, () => {});

ES6 solutions

With ES6 you can pass parameters as an object like following code. Note that if sectionItem is omitted, it'll be undefined.

let retrieveData = ({ section, sectionItem, callback }) => {
  console.log('Section :', section);
  console.log('Section item :', sectionItem);
  console.log('Callback :', callback);
}

retrieveData({
  section: 'a',
  sectionItem: 'b',
  callback: () => {}
});
retrieveData({
  section: 'a',
  callback: () => {}
});

You can also set a default value to sectionItem :

let retrieveData = ({ section, sectionItem = 'defaultValue', callback }) => {
  console.log('Section :', section);
  console.log('Section item :', sectionItem);
  console.log('Callback :', callback);
}

retrieveData({
  section: 'a',
  sectionItem: 'b',
  callback: () => {}
});
retrieveData({
  section: 'a',
  callback: () => {}
});

ES5 Solutions

As stated in the comments, you could also simply move sectionItem to the end of the function, making it easier to omit.

let retrieveData = (section, callback, sectionItem) => {
    console.log('Section :', section);
    console.log('Section item :', sectionItem);
    console.log('Callback :', callback);
}

retrieveData('a', () => {}, 'b');
retrieveData('a', () => {}); // Here you omit the parameter

Or, if you need to be ES5 compliant, you can reproduce ES6 behavior by doing something like this. But it's less clearer without documentation since we don't know exactly which parameters the function is expecting.

let retrieveData = (options) => {
    console.log('Section :', options.section);
    console.log('Section item :', options.sectionItem);
    console.log('Callback :', options.callback);
}

retrieveData({
  section: 'a', 
  sectionItem: 'b',
  callback: () => {}
});
retrieveData({
  section: 'a', 
  callback: () => {}
});

Your ES6 solution is exactly what I was attempting to achieve – no requirement for backwards compatibility so this works perfectly. — Ryan, Sep 29 '17 at 13:48

score 8 · Answer 2 · edited Jun 29 '21 at 09:49

Please use optional arguments and deconstruct your parameters.

const foo = (section, {sectionItem, callback} = {}) => {
  console.log(section, sectionItem, callback);
}

So both sectionItem and callback are optional:

let data = retrieveData(aSection, {
  sectionItem: 'some',
  callback: json => {
    ...
  },
});

This way you can call either of:

retrieveData(aSection)
retrieveData(aSection, {sectionItem: 'some'})
retrieveData(aSection, {callback: json => { ... }})

Another important aspect is you keep optional arguments verbose right from the caller.

Using destructuring to define optional parameters in ES6

2 Answers2

ES6 solutions

ES5 Solutions