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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Cloudinary image

Video API: manage, encode, and optimize for any device, channel or network condition. Deliver branded video experiences in minutes and get deep engagement insights.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay