JavaScript Code Styling Best Practices — Functions Arguments, Lines, Identifiers

John Au-Yeung
May 21 · 4 min read
Photo by Zdeněk Macháček on Unsplash

JavaScript is a very forgiving language. It’s easy to write code that looks messy and hard to read but runs.

In this article, we’ll look at issues like line breaks between arguments of a function call and consistent line breaks between parentheses.

Add Line Breaks Between Arguments of a Function Call

Line breaks between arguments of a function call are only needed if the expressions that we pass in are long.

For instance, if we’re just calling a function with a few numbers, then we don’t need line breaks between the arguments.

We can just write:

foo(1, 2, 3);

since it doesn’t take up too much space and we can already easily read the arguments that are passed into the foo function call.

On the other hand, if we pass in long expressions for argument as we have below, then we should add line breaks between the arguments:

const foo = () => {};
foo(
[1, 2, 3, 4, 5, 6],
[1, 2, 3, 4, 5],
[1, 2, 3, 4, 5, 6, 7, 8]
);

This way, we can read each expression that we pass in as arguments clearly. Every long-expression in their own line means that they won’t overflow the page so we don’t have to scroll horizontally.

It also clearly distinguishes where the arguments start and end.

Consistent Line Breaks Inside Function Parentheses

Usually, we don’t need line breaks inside the parentheses of the function signature since we shouldn’t have too many function arguments in our code.

We should have a maximum of 5 parameters in our function so the signature won’t overwhelm the readers of our code.

It makes reading the code easier and reduce the chance of mistakenly pass in the wrong kind of data or pass in arguments in the wrong order.

The more parameter our function has, the easier that we can make mistakes when we pass arguments in our function call.

Therefore, we usually don’t need line breaks between the parameters of our code.

We can just write something like the following:

const foo = (a, b) => {};

The signature in the foo function above that we don’t need to break the parameters into their own line in the function signature.

The only possible exception are for accepting object parameters that we’re destructuring and have lots of entries.

For instance, we may have an object parameter that has lots of properties and possibly have default values assigned to some of the parameters or entries.

We can write:

const foo = ({
foo = 1,
bar,
baz,
qux,
a
}) => {};

In the code above, our foo function takes a parameter that has 5 or more properties.

The object that we pass in as the argument includes 5 properties, including foo , which has the default value 1, bar , baz , qux , and a and possibly more that we didn’t choose to destructure.

We keep each property in one line so that it’s consistent with objects, which have properties and values in their own row, and make room for default values.

Minimum and Maximum Identifier Lengths

We may want to enforce minimum or maximum identifier lengths so that we can create identifiers that are descriptive but not too long.

For instance, we may want to enforce minimum identifier lengths so that people can’t define variable names that are too short like the following:

let x = 1;

In the code above, we defined a variable named x , which no one knows what ie means since there’s no context and the name isn’t descriptive.

If we make everyone create identifier names that are at least 5 characters long, for example, then we probably won’t see these kinds of identifiers created.

For instance, we if the rule finds issue with the example above, then we may change it to:

let numFruits = 1;

Now we know that the variable actually means the number of fruits.

We may also want to create maximum identifier lengths so that people won’t create names that are too long and have lots of useless characters that don’t convey any useful information to us.

Photo by Zdeněk Macháček on Unsplash

Conclusion

Line breaks between arguments of a function call are only needed if the expression that we pass into our function call is long.

Function signatures usually don’t need line breaks since a function shouldn’t usually have too many parameters. The only possible exception is when we’re destructuring objects.

We may also want to enforce minimum and maximum identifier lengths so that the identifiers created our descriptive but not too verbose.

A note from the Plain English team

Did you know that we have four publications? Show some love by giving them a follow: JavaScript in Plain English, AI in Plain English, UX in Plain English, Python in Plain English — thank you and keep learning!

We’ve also launched a YouTube and would love for you to support us by subscribing to our Plain English channel

And as always, Plain English wants to help promote good content. If you have an article that you would like to submit to any of our publications, send an email to submissions@plainenglish.io with your Medium username and what you are interested in writing about and we will get back to you!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store