Is there a way to retain the name of a destructured function argument? I.e., the name of the root object?
In ES5, I might do this (using inheritance as a metaphor to make the point):
// ES5:
var setupParentClass5 = function(options) {
textEditor.setup(options.rows, options.columns);
};
var setupChildClass5 = function(options) {
rangeSlider.setup(options.minVal, options.maxVal);
setupParentClass5(options); // <= we pass the options object UP
};
I'm using the same options
object to hold multiple configuration parameters. Some parameters are used by the parent class, and some are used by the subclass.
Is there a way to do this with destructured function arguments in ES6?
// ES6:
var setupParentClass6 = ({rows, columns}) => {
textEditor.setup(rows, columns);
};
var setupChildClass6 = ({minVal, maxVal}) => {
rangeSlider.setup(minVal, maxVal);
setupParentClass6( /* ??? */ ); // how to pass the root options object?
};
Or do I need to extract all of the options in setupChildClass6()
so that they can be individually passed into setupParentClass6()
?
// ugh.
var setupChildClass6b = ({minVal, maxVal, rows, columns}) => {
rangeSlider.setup(minVal, maxVal);
setupParentClass6({rows, columns});
};
I have the 'options' arguments on too many places myself. I would opt for 1 extra line of code. Not worthy in this example, but a good solution when having destructuring on more lines.
const setupChildClass6 = options => {
const {minVal, maxVal} = options;
rangeSlider.setup(minVal, maxVal);
setupParentClass6(options);
};
You cannot do it directly in the arguments, but you can extract the values afterward:
function myFun(allVals) {
const { val1, val2, val3 } = allVals;
console.log("easy access to individual entries:", val2);
console.log("easy access to all entries:", allVals);
}
You cannot use destructuring and simple named positional argument for the same parameter at the same time. What you can do:
Use destructuring for setupParentClass6
function, but old ES6 approach for setupChildClass6
(I think this is the best choice, just make name shorter):
var setupChildClass6 = (o) => {
rangeSlider.setup(o.minVal, o.maxVal);
setupParentClass6(o);
};
Use old arguments
object. But arguments
can slow down a function (V8 particular), so I think it's a bad approach:
var setupChildClass6 = ({minVal, maxVal}) => {
rangeSlider.setup(minVal, maxVal);
setupParentClass6(arguments[0]);
};
ES7 has proposal for rest/spread properties (if you don't need minVal
and maxVal
in setupParentCalss6
function):
var setupChildClass6b = ({minVal, maxVal, ...rest}) => {
rangeSlider.setup(minVal, maxVal);
setupParentClass6(rest);
};
Unfortunately it's not ES6.
This is the best I could come up with. Not great, but far better (IMO) than doing the destructing on another line. It gives you a heads-up in a way too that you are going to provide options
first and foremost, and also that you are destructuring it in the function...
var setupParentClass6 = options => (({rows, columns}) => {
textEditor.setup(rows, columns);
})(options);
var setupChildClass6 = options => (({minVal, maxVal}) => {
rangeSlider.setup(minVal, maxVal);
setupParentClass6(options);
})(options);
©2020 All rights reserved.