Passing particular argument to a function having multiple arguments in React

Question

In React, I have created function mentioned below:

infoPrint (firstname = '--', middlename = '--', surname = '--') { console.log('Firstname: ', firstname, ', Middle name: ', middlename, ', Surname: ', surname); }

I am calling this function in componentWillMount:

componentWillMount() { var firstname = 'Naisarg'; var surname = 'Parmar'; this.infoPrint(firstname,surname); }

I am getting this output:

Firstname: Naisarg, Middle name: Parmar, Surname: --

But I'm expecting this one:

Firstname: Naisarg, Middle name: --, Surname: Parmar

You will need to call it as this.infoPrint(firstname, null, surname); — lthh89vt
– lthh89vt, Commented Jan 24, 2019 at 3:25
thank you @Ithh89vt. I know this. But in case, there are so many argument then i just want to pass particular argument. and remaining argument will take default value. so I don't want to pass null. like this this.infoPrint(firstname, surname); — Naisarg Parmar
– Naisarg Parmar, Commented Jan 24, 2019 at 3:30

GG. · Accepted Answer · 2019-01-24 04:10:00Z

You can achieve that by passing a literal object as argument of your function:

class User extends Component { componentWillMount() { var firstname = 'Naisarg'; var surname = 'Parmar'; this.infoPrint({ firstname, surname }); } infoPrint({ firstname = '--', middlename = '--', surname = '--' }) { console.log('Firstname: ', firstname, ', Middle name: ', middlename, ', Surname: ', surname); } }

It's a very common pattern that helps a lot with optional parameters.

-

If you prefer not to use an object, then you must pass all the arguments in the correct order:

class User extends Component { componentWillMount() { var firstname = 'Naisarg'; var surname = 'Parmar'; this.infoPrint(firstname, null, surname); } infoPrint(firstname = '--', middlename = '--', surname = '--') { console.log('Firstname: ', firstname, ', Middle name: ', middlename, ', Surname: ', surname); } }

Thank you @GG. This is answer fulfil my requirement. But why it is required to pass argument in OBJECT. not direct?
It is not required (I mean, there are probably other solutions) but it's very useful when you have optional parameters. Instead of doSomething(1, 2, null, 4, null, 5, 6, null, 8), you can write doSomething({ a: 1, b: 2, d: 4, e: 5, f: 6, g: 8 }) (all the null are gone). It's a bit more verbose but you don't have to worry anymore about passing all the parameters, even the optionals, in the correct order. Also, as you pass the keys, it's more readable if your function takes a lot of arguments.
What you are referring to is called destructuring. You are plucking items out of an object essentially when written out like this.

Dacre Denny · Accepted Answer · 2019-01-24 03:57:58Z

To achieve what you require, you will either need to pass -- or null for the middlename argument:

componentWillMount() { var firstname = 'Naisarg'; var surname = 'Parmar'; this.infoPrint(firstname, null, surname); this.infoPrint(firstname, '--', surname); }

or alternatively, you could refactor your method signature by passing these arguments indirectly via an object argument:

function infoPrint(name = { first: '--', middle: '--', last: '--' }) { console.log('Firstname: ', name.first, ', Middle name: ', name.middle, ', Surname: ', name.last); } infoPrint({ first: 'Naisarg', last: 'Parmar' });

The "object argument" method shown above resolves the issue you're facing by retaining a (key) relationship between the arguments themselves, and the way in which each keyed argument is actually used in your infoPrint() function.

Without this, the JavaScript run-time has no way of knowing that you intend the surname variable to actually be passed to infoPrint() as the "third surname argument" - simply put, the arguments that you pass are assigned from first to last. Substituting the variable with values as shown below might give more insight as to what's happening, and why your original code doesn't work as expected:

// var firstname = 'Naisarg'; // var surname = 'Parmar'; // Substitute variables with values to better understand how // arguments are being passed to the function this.infoPrint( 'Naisarg' /* <-- firstname */, 'Parmar' /* <-- middlename */, /* no value for surname, so use default "--" */ ); /* Prints: "Firstname: Naisarg , Middle name: Parmar , Surname: -- " */

Why it is required to pass argument in object..not directly? As mentioned in Question.
@NaisargParmar I've updated my answer with more detail - does this clarify the problem for you?

Collectives™ on Stack Overflow

Passing particular argument to a function having multiple arguments in React

2 Answers 2

3 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Related