DEV Community

Cover image for Make your JavaScript more readable with named parameters
Taha Shashtari
Taha Shashtari

Posted on • Originally published at tahazsh.com

2 1 1 2 1

Make your JavaScript more readable with named parameters

We write and use functions all the time in JavaScript—whether you write FP or OOP. Every time you call a function, you need to know which arguments to pass and in what order.

The position of the arguments doesn't show what they are for. Take a look at this example:

addToCard(456, 2, { color: 'blue', size: 'L' }, 50, 'new10')
Enter fullscreen mode Exit fullscreen mode

We might be able to guess some of them, but it’s not very clear what is being passed here. Additionally, we need to mentally parse each value to map it to something meaningful.

The only thing I can guess here is { color: 'blue', size: 'L' }, which are the attributes of the product the user is purchasing. But what are these three numbers—456, 2, and 50—for? What's the last string, new10, for?

Now, if it were written like the following, we would understand it instantly:

addToCard({
  productId: 456,
  quantity: 2,
  attributes: { color: 'blue', size: 'L' },
  price: 50,
  discountCode: 'new10'
})
Enter fullscreen mode Exit fullscreen mode

That's what we call Named Parameters.

How the function is defined

The above example is for the caller side. When defining the function, we use destructured parameters to explicitly indicate what parameters we expect—it also makes the function's parameter list more readable.

So instead of this:

const addToCard = (data) => {}
Enter fullscreen mode Exit fullscreen mode

Write this:

const addToCard = ({ productId, quantity, attributes, price, discountCode }) => {}
Enter fullscreen mode Exit fullscreen mode

Default values

With named parameters, you can still define default values for the parameters.

const addToCard = ({
  productId,
  quantity = 1,
  attributes,
  price,
  discountCode
}) => {}
Enter fullscreen mode Exit fullscreen mode

In this example, we set quantity to 1, so you can pass the other parameters without quantity, and it will use 1 for it.

A common pitfall

If, for some reason, the function can be called without any parameters, like this addToCall(), you will get an error because it cannot destructure undefined.

addToCall()
// TypeError Cannot destructure property 'productId' of 'undefined' as it is undefined.
Enter fullscreen mode Exit fullscreen mode

To fix it, set the default value of the whole object to {}.

const addToCard = ({ productId, quantity, attributes, price, discountCode } = {}) => {}
Enter fullscreen mode Exit fullscreen mode

One parameter

You'll often hear that it's best to use named parameters when you have more than two or three parameters. I think you should use them even for one parameter, because knowing what you're passing is the goal.

For example, can you tell what this argument is for?

processPayment(true)
Enter fullscreen mode Exit fullscreen mode

Now with named parameters:

processPayment({ notifyUser: true })
Enter fullscreen mode Exit fullscreen mode

All the good things

Named parameters can drastically improve your code.

They make your code easier to read—you know what arguments are being passed.

You don't need to remember the order of the parameters. You can pass addToCard({ quantity: 5, productId: 456 }) or addToCard({ productId: 456, quantity: 5 })—either works!

More flexible default values—you don't have to define parameters with default values as the last ones.

More scalable—you can add more parameters without breaking current calls. Just add the new parameter anywhere; the order doesn't matter.


🔗 Let's stay connected:

🌐 Blog: https://tahazsh.com/
🎥 YouTube: https://www.youtube.com/@tahazsh
𝕏 Twitter/X: https://twitter.com/tahazsh
🦋 Bluesky: https://bsky.app/profile/tahazsh.bsky.social
🐘 Mastodon: https://fosstodon.org/@tahazsh

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay