ES6 solutions

Question

119

Using destructuring to define optional parameters in ES6

rated 0 times [ 126] [ 7] / answers: 1 / hits: 23626 / 7 Years ago, fri, september 29, 2017, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

talonb

Add To Favorites

Follow

Total Points: 596

Total Questions: 103

Total Answers: 91

Location: Northern Mariana Islands

Member since Fri, Jan 15, 2021

3 Years ago

answered 7 Years ago margaritakristinak · Accepted Answer

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: () => {}

});