DEV Community

Cover image for Daily JavaScript Tips #1
Dhairya Shah
Dhairya Shah

Posted on • Originally published at codewithsnowbit.hashnode.dev

Daily JavaScript Tips #1

Pass arguments as an object.

The code becomes much more clear and easily understandable as the name of the properties is clearly visible to you as well any code reviewer.

Don't do this ❌

const user = (name, email, proUser) => {
        // Logic goes here
}

user('SnowBit', 'xyz@someemail.zyx', true);
Enter fullscreen mode Exit fullscreen mode

Do this ✅

const user = ({name, email, proUser, isAdmin}) => {
        // Logic goes here
}

user({
    name: 'SnowBit', 
    email: 'xyz@someemail.zyx', 
    proUser: true,
    isAdmin: true
});
Enter fullscreen mode Exit fullscreen mode

Thank you for reading

Top comments (5)

Collapse
 
supportic profile image
Supportic

Could you elaborate more about your "tipp"? If you hover over the function call in your first example you can also see all of your needed parameters.

Collapse
 
rakesh_patel profile image
Rakesh Patel

One major advantage of using object is,

You don’t need to follow arguments sequence.

With object you can randomly position the arguments(aka property name)

With respect to above example.

  1. function Test( arg1, arg2, arg3 ) { //logic }

While calling function, you need to pass arguments with proper sequence. and suppose if you not want to pass arg2 value then you have to call function like,
Test(10, undefined, 20);

But with Object, you don’t need to remember sequence of parameters,
E.g.
Test({arg1 : 10, arg3 : 20, arg2:5})

Collapse
 
supportic profile image
Supportic • Edited

At the point where you leave out parameters, you already destroy the experience for the reviewer because it will always raise the question: When is it defined, when undefined?
You could also use the spread operator for all optional parameters at the end:
function Test( arg1, arg2, ...args)

The best solution at this point would be using TypeScript.

Thread Thread
 
rakesh_patel profile image
Rakesh Patel

My requirement is, I don't want to remember the sequence of arguments while passing parameter to function.

function Func (fName, mName, lName) {
console.log(
full name : ${fName} ${mName} ${lName});
}

while calling above function, I must have to pass parameter's in correct order,
Func( "Elon", "Reeve", "Musk" ); //will log correct full name

What if I call function like,

Func( "Elon", "Musk", "Reeve" ); //it will log wrong full name

with Object we can avoid parameter sequence,

function Func ({fName, mName, lName}) {
console.log(
full name : ${fName} ${mName} ${lName});
}

Func({ lName : "Musk", fName : "Elon", mName : "Reeve"}); // now we can pass parameter in any order

and if you don't want to pass any parameter, then just pass default value,

function Func ({fName = "", mName = "", lName = ""}) {
console.log(
full name : ${fName} ${mName} ${lName});
}

Func({fName : "Elon"});

Now coming to your solution : OPTIONAL PARAMETER / REST OPERATOR

function Func (fName, ...args) {
console.log(
full name : ${fName} ${args[0]} ${args[1]});
}

Func( "Elon", "Musk", "Reeve" );

but even with optional parameter, I need to remember correct index no of parameter
( Respective to above function, mName only accessible by args[0])

(It will be great if you explain how OPTIONAL PARAMETER will fulfill my requirement. I will also learn something new)

Post Author have written simple JS development tips, and I don't think Typescript will resolve that issue

Thread Thread
 
dhairyashah profile image
Dhairya Shah

That was great explanation. Good