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

2

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);
    }
}

edited Jan 24, 2019 at 4:10

answered Jan 24, 2019 at 3:30

GG.

22k14 gold badges93 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Naisarg Parmar Over a year ago

Thank you @GG. This is answer fulfil my requirement. But why it is required to pass argument in OBJECT. not direct?

GG. Over a year ago

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.

John Ruddell Over a year ago

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

1

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: -- " */

edited Jan 24, 2019 at 3:57

answered Jan 24, 2019 at 3:30

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

2 Comments

Naisarg Parmar Over a year ago

Why it is required to pass argument in object..not directly? As mentioned in Question.

Dacre Denny Over a year ago

@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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related