JavaScript Code Styling Best Practices — Statements, Comments, Conditionals, and Constructors

John Au-Yeung
May 19 · 4 min read
Photo by Leslie Jones on Unsplash

JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.

In this article, we’ll look at the number of statements that we should have in a function, multiline comments, newlines between ternary expressions, and issues with naming and calling constructors.

Number of Statements in a Function

The number of statements in a function should be similar to the number of lines in a function. Both of these should be minimized.

Therefore, the fewer statements there is, the easier to read our function will be.

Maximum Number of Statements Per Line

The maximum number of statements per line should be minimized so that most people can read everything in a line without scrolling horizontally.

This means that whatever we have in a line should be around 100 characters long.

Too many statements are hard to read, even if they’re separated by semicolons.

For instance, the following code is no good:

const foo = () => { let x = 1; let y = 2; let z = 3; let a = 4; }

It’s long and hard to read even with semicolons separating the statements.

However, the following is much better:

const foo = () => {
let x = 1;
let y = 2;
let z = 3;
let a = 4;
}

Each assignment statement is in one line so that each of them is easy to read.

Multiline Comments

The better way to write multiline comments is to use the starred block. A starred block is a code block that looks like:

/* comment */

This works for both single and multiline comments, so it’s more flexible.

If we want to write a multiline comment with it, then can write it as follows:

/*
* multiline
* comment
*/

It’s neat and it works for both single and multiline comments.

Newlines Between Operands of Ternary Expressions

Most ternary expressions should be one line. If it’s more than one line, then we may want to write an if statement instead.

For instance, a short ternary expression can be written as follows:

const foo = condition ? 'foo' : 'bar';

However, if any part of the ternary expression is long, then we can rewrite it as an if statement as follows:

let foo;
if (condition) {
foo = [1, 2, 3, 4, 5, 6];
} else {
foo = [1, 2, 3, 4, 5, 6.7 .8];
}

Since we have long expressions in the code above, the if statement is a better choice since the 2 arrays together may overflow the page if they’re all put in one line.

Also, we shouldn’t have nested ternary expressions. They’re always hard to read, especially if the expressions don’t have parentheses delimiting where the ternary expressions start and end.

For instance, we shouldn’t write something like:

const foo = a ? b ? c ? 'foo' : 'bar' : 'baz' : 'qux';

Nested ternary expressions like the one we have above are hard to read and understand.

Constructor Names Should Begin with a Capital Letter

Constructor functions and classes should start with a capital letter. This is standard JavaScript convention to distinguish them from other kinds of identifiers like variables and non-constructor functions.

Constructor functions and classes are equivalent so they should stick to the same convention.

For instance, we should have them as follows:

class Foo {}function Bar() {}

However, some JavaScript built-in functions like Boolean and Symbol break this rule.

They aren’t constructors but they’re named with a capital letter as the first letter.

Photo by Christian Fregnan on Unsplash

Add Parentheses When Invoking a Constructor with No Arguments

When we invoke a constructor with no arguments in JavaScript, we can do that without writing out the parentheses.

For instance, we can invoke the Foo class that we have as follows:

class Foo {}const foo = new Foo;

However, we shouldn’t do that since many people don’t know this JavaScript feature. They may think that we’re doing something else with the constructor or class.

Therefore, we should just add the parentheses even if there’re no arguments for the sake of clarity.

Conclusion

Names of constructor functions and classes should start with a capital letter.

We also should invoke them with parentheses even though we don’t need them if we don’t pass in any arguments.

Ternary expressions should be short. This means we shouldn’t nest them since they’re hard to read.

If it’s long, then use an if statement instead.

Functions shouldn’t have too many statements in them to keep them short. They should only do one thing.

Starred comment blocks work as both single and multiline comments, so we just use them for commenting on our code.

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!

JavaScript In Plain English

New articles every day.

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