There is a function that requires and setting object.

var opt = {
    height: 300,
    maxLength: 4000,
    valueChangeEvent: "change",
    placeholder: "",
}
$(selector1).doStuff(opt);
$(selector2).doStuff(opt);
$(selector3).doStuff(opt);
$(selector4).doStuff(opt);

The thing is that the placeholder should be different every time. Currently, I create this opt object with every call but it seems ugly. Is there a way to pass this opt object while just changing one property?

There is a function that requires and setting object.

var opt = {
    height: 300,
    maxLength: 4000,
    valueChangeEvent: "change",
    placeholder: "",
}
$(selector1).doStuff(opt);
$(selector2).doStuff(opt);
$(selector3).doStuff(opt);
$(selector4).doStuff(opt);

The thing is that the placeholder should be different every time. Currently, I create this opt object with every call but it seems ugly. Is there a way to pass this opt object while just changing one property?

• javascript

Share Improve this question Follow edited Oct 4, 2019 at 7:21 SteepLearningCurve 1744 bronze badges asked Oct 4, 2019 at 4:35 IcenIcen 45166 silver badges1717 bronze badges 5

• I am confused. What are you trying to do? "The thing is that placeholder should be different every time" ==> What kind of values should it be? – Spangle Commented Oct 4, 2019 at 4:37
• What is the actual function you wish to call? (the real value of doStuff, that'll indicate what sort of solutions are possible) – CertainPerformance Commented Oct 4, 2019 at 4:37
• @CertainPerformance the function doesn't really matter. It's just about spread operator that I forgot about. – Icen Commented Oct 4, 2019 at 4:51
• Spread works, but I have the strong feeling that it's possible to write even more DRY code, depending on the circumstances. Even with using spread, the code is still pretty repetitive. – CertainPerformance Commented Oct 4, 2019 at 4:53
• @CertainPerformance probably true however doStuff method is just a devExtreeme control called dxTextArea – Icen Commented Oct 4, 2019 at 7:35

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

You can use your opt object as a template like this

$(selector1).doStuff({...opt, placeholder: 'different every time' })

The ... operator destructures the original opt object, then any further other properties are added to the result, replacing anything that conflicts.

Use the spread syntax like this:

let opt = {
    height: 300,
    maxLength: 4000,
    valueChangeEvent: "change",
    placeholder: "",
}

console.log({...opt, placeholder: "foo"});
console.log({...opt, placeholder: "bar"});

Or Object.assign like this:

let opt = {
    height: 300,
    maxLength: 4000,
    valueChangeEvent: "change",
    placeholder: "",
}

console.log(Object.assign({}, opt, { placeholder: "foo" }));
console.log(Object.assign({}, opt, { placeholder: "bar" }));

Both of these solutions are non-destructive (i.e. they don't change opt). If you want a destructive solution, leave out the first argument from Object.assign.

You could write a function which produces opt for you. In this function, you can pass the placeholder as an argument to be used like so:

const createOpt = (placeholder = '') => ({
    height: 300,
    maxLength: 4000,
    valueChangeEvent: "change",
    placeholder
});


console.log(createOpt("x"));
console.log(createOpt("y"));
console.log(createOpt());

you can used spread syntax, allows an iterate are expected in this case:

$(selector1).doStuff({...opt, placeholder: 'Everything' })

read more about it here