DEV Community

Cover image for CleanCode: How to use named parameters in JavaScript
Pierre-Henry Soria ✨
Pierre-Henry Soria ✨

Posted on

CleanCode: How to use named parameters in JavaScript

#javascript #cleancoding #cleancode #beginners

If you're familiar with named/keyword arguments in programming languages like Ruby, Python, and PHP 8, you might wonder if JavaScript offers the same functionality.
That's an excellent question. Named parameters, also known as named arguments, significantly enhance code readability. With named-parameter arguments, we can directly understand the purpose of each argument in a function call.

One way to achieve this is by using object destructuring on the function parameters.

Here’s an example:

const invertSentence = ({
  sentence,
  doesFormat = false
}) => {
  if (doesFormat) {
    return sentence;
  }

  // Logic…

  // Split the sentence into two segments
  const [stringOne, stringTwo] = sentence.split(“. “);

  // Rebuild the sentence
  const rebuiltString = `${stringTwo} ${stringOne}`;

  return rebuiltString;
};
Enter fullscreen mode Exit fullscreen mode

Now, you can specify the required properties as “named arguments” when calling the function.

invertSentence({
  sentence: 'JS makes my job easier. Writing clean code avoid me from having a headache',
  doesFormat: false
});
Enter fullscreen mode Exit fullscreen mode

Conclusion

In conclusion, JavaScript doesn't support keyword arguments natively, unlike PHP 8 and Python for instance. However, thanks to the power of object destructuring (introduced in ES6), we can structure our function signatures to accept arguments using their respective property names, thereby enhancing code readability.

And you, how often are you using this practice?

Happy Day! 🤠 You can also follow me on GitHub - https://github.com/pH-7

Top comments (5)

Collapse
 
nathan_tarbert profile image
Nathan Tarbert •

Love this, I always push for destructured params. It saves me from so many headaches later

Collapse
 
pierre profile image
Pierre-Henry Soria ✨ •

That's great to hear! Thanks for passing by @nathan_tarbert! ☺️

Collapse
 
lionelrowe profile image
lionel-rowe • • Edited

I find the 2-parameter data, options pattern usually works well, as long as there's one obvious param that would go in data. I'm not sure your current example makes sense, as having an option that just means "do nothing" seems like an anti-pattern, but say you had a delimiter param instead, it could look like this, with sentences being the obvious candidate for the data param:

function invertSentences(sentences, { delimiter = '. ' } = {}) {
    return sentences.split(delimiter).reverse().join(delimiter)
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
xwero profile image
david duymelinck • • Edited

I wouldn't go to deep in the optional functionality, that is not the point of the example.

Your method shows the rigidity of both methods.
In your example the sentences parameter can't be called by name. While in the post example the sentence parameter can not be called without a name.

In languages where named parameters are build in, the parameters can be used by name and then they can be out of order. Or the parameters can be used without the name, but then they have to be called in order.

function reverse(sentence, format = 'reverseWords') {}

reverse('test');
reverse('test', 'reverseWords');
reverse(sentence: 'test');
reverse(format: 'reverseSentence', sentence: 'test');
reverse('reverseWords', 'test') // this will not have the desired effect, and probably create an error.
Enter fullscreen mode Exit fullscreen mode

While I prefer explicit over implicit in code. In this case i lean more to your method where it is not necessary to use the name of the parameter for the required parameters.

Collapse
 
nevodavid profile image
Nevo David •

Pretty cool, I use this trick all the time and honestly my brain thanks me every time I debug stuff.