在不重新分配命名参数的情况下调用函数

Question

I have a function that has named arguments.

I am trying to call the same function from different events without overwriting the values of the others previously assigned.

I have tried store the values of the previously clicked buttons in variables but that doesn't work.

Is there a way to call the functions and assign a single argument at a time without overwriting the others?

 function mainFun({ val1, val2, val3 }) { var value1 = val1, value2 = val2, value3 = val3; // console.log(value1, value2, value3); console.log(val1, val2, val3); } 

 <button onclick="mainFun({val1 : 'Caller 1'})">First Event</button> <button onclick="mainFun({val2 : 'Caller 2'})">Second Event</button> <button onclick="mainFun({val3 : 'Caller 3'})">Third Event</button> 

Trying to achieve:

On First Event > Caller 1 undefined undefined

On Second Event > Caller 1 Caller 2 undefined

On Third Event > Caller 1 Caller 2 Caller 3

Thanks in advance!

Answer 1

You could store the values as property of the function.

 function mainFun({ val1 = mainFun.val1, val2 = mainFun.val2, val3 = mainFun.val3 }) { mainFun.val1 = val1; mainFun.val2 = val2; mainFun.val3 = val3; console.log(val1, val2, val3); } 

 <button onclick="mainFun({ val1: 'Caller 1' })">First Event</button> <button onclick="mainFun({ val2: 'Caller 2' })">Second Event</button> <button onclick="mainFun({ val3: 'Caller 3' })">Third Event</button> 

If you do not like to store the values as properties of the function, you could use a closure and return a function for the same group of use cases.

 function mainFun(defaults = {}) { return function({ val1 = defaults.val1, val2 = defaults.val2, val3 = defaults.val3 }) { defaults.val1 = val1; defaults.val2 = val2; defaults.val3 = val3; console.log(val1, val2, val3); }; } var work = mainFun(); 

 <button onclick="work({ val1: 'Caller 1' })">First Event</button> <button onclick="work({ val2: 'Caller 2' })">Second Event</button> <button onclick="work({ val3: 'Caller 3' })">Third Event</button> 

Answer 2

value1 , value2 and value3 variables are local to your mainFun function. They're being garbage collected after each mainFun execution is done.

To achieve what you want to achieve, you'll need to store the previous parameters somewhere.

There are many possibilities :

• One of them is global variables :

 let value1, value2, value3; function mainFun({ val1, val2, val3 }) { value1 = val1 || value1; value2 = val2 || value2; value3 = val3 || value3; console.log(value1, value2, value3); //console.log(val1, val2, val3); } 

 <button onclick="mainFun({val1 : 'Caller 1'})">First Event</button> <button onclick="mainFun({val2 : 'Caller 2'})">Second Event</button> <button onclick="mainFun({val3 : 'Caller 3'})">Third Event</button> 

• Another solution would be to store them as the functions properties (as Nina Scholz suggested)

Answer 3

Please correct me if I'm misunderstanding your question. But if you want to store te values, you'll have to declare them outside of your function. Currently your values are only alive within your function. When the function is called they will be re-created and after the function finishes they will be deleted again.

You could try to declare your values outside of your function and prevent overriding like this:

var value1, value2, value3;
function mainFun({
  val1,
  val2,
  val3
}) {
   value1 = value1 || val1,
    value2 = value2 || val2,
    value3 = value3 || val3;
  console.log(value1, value2, value3);
}

what the value1 || val1 value1 || val1 basically does is say 'hey, if value1 already has a value, use that one. If not, use val1 . Acts the same as value1 = value1 !== undefined ? val1 : value1 value1 = value1 !== undefined ? val1 : value1 or easier:

if (value1 === undefined) {
   value1 = val1;
} else { // obviously not needed
   value1 = value1;
}