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', '[e-mail]', true);

Do this ✅

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

user({
    name: 'SnowBit', 
    email: '[e-mail]', 
    proUser: true,
    isAdmin: true
});

---

Thank you for reading

• Follow me on Twitter - @codewithsnowbit
• Subscribe me on YouTube - Code With SnowBit

Comments

[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.

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

[Supportic]

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.

[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

[Dhairya Shah]

That was great explanation. Good