JavaScript Best Practices for Writing More Robust Code — Functions

JavaScript is an easy to learn programming language. It’s easy to write programs that runs and does something. However, it’s hard to account for all the uses cases and write robust JavaScript code.

In this article, we’ll look at how to write JavaScript functions that are more robust and maintainable.

Multiple Parameters is Better Than One Object Parameter

If there aren’t too many parameters in our function, we should have multiple parameters instead of one single object parameter.

It’s much clearer to have multiple parameters instead of one single object parameter.

For instance, the following:

const fullName = (person) => `${this.firstName} ${this.lastName}`

is harder to read than:

const fullName = (firstName, lastName) => `${firstName} ${lastName}`

because we don’t know what the person parameter in the function signature contains until we look at the code.

In the second example, we know that firstName and lastName are the parameters right away.

If the functions are more complex than what we have above, then it’s even harder to trace what our function has.

A good rule of thumb is that for functions that have 5 or fewer parameters, then they should be listed separately in the function signature.

Otherwise, we have no choice but to combine some or all of them into one object parameter to keep the number of parameters 5 or less.

This is because once a function has more than 5 parameters, now the function signature becomes harder to read.

Also, if a function have lots of arguments, then it’s harder to remember the order to pass in the arguments so we can call our function correctly.

Skipping parameters is also a problem if our function has lots of parameters since we have to check where to pass in undefined to so that we can skip passing in a value for that parameter.

If we pass in an object, then we can just set properties to undefined and be done with calling the function instead of thinking where we need to pass in undefined if our function has lots of parameters.

Destructuring and Functions

Destructuring is a nice feature of ES2015 that lets us decompose array entries and object entries into their own variables.

In terms of functions, we can use it to destructure object or array parameters to selectively reference object properties or array entries that we need.

For instance, if we have the following function:

const fullName = (person) => `${this.firstName} ${this.lastName}`

Then we can rewrite it with the destructuring syntax by writing:

const fullName = ({
  firstName,
  lastName
}) => `${firstName} ${lastName}`

And then we can call it as follows:

fullName({
  firstName: 'joe',
  lastName: 'smith'
})

In the code above, we passed in:

{
  firstName: 'joe',
  lastName: 'smith'
}

to fullName , and then because of the destructuring syntax, the JavaScript interpreter will automatically get the value with the given property name and interpolate the string with that variable value.

So firstName in the destructured object is the same one that’s referenced in the string, which is also the same as the firstName property that’s passed into the fullName function.

Therefore, the console log output should be 'joe smith' .

It also works with nested objects. For instance, we can write:

const fullName = ({
  name: {
    firstName,
    lastName
  }
}) => `${firstName} ${lastName}`

Then if we call fullName as follows:

fullName({
  name: {
    firstName: 'joe',
    lastName: 'smith'
  }
})

We’ll get the same result as before. It’s important to note that we don’t have to include every property in the object in the destructuring syntax.

We can also write:

const name = ({
  name: {
    firstName,
  }
}) => `${firstName}`

and call it like:

name({
  name: {
    firstName: 'joe',
    lastName: 'smith'
  }
})

Destructuring also works for arrays. In terms of functions, we can use it to destructure array parameters into variables. For instance, we can write:

const fullName = ([firstName, lastName]) => `${firstName} ${lastName}`

Now the fullName function takes an array as the argument instead of an object.

Then we can call it as follows:

fullName(['joe', 'smith'])

And we’ll get 'joe smith' as the returned value as we did before.

Conclusion

If our function takes 5 or fewer parameters, then they should be separate for easy readability and reduce the cognitive load of whoever’s using the function.

Also, the destructuring syntax is great for situations when we need to take an object or array entries as parameters in our function and we want to selectively reference the entries from those arguments.