JavaScript Code Styling Best Practices — Blocks and Casing

John Au-Yeung
May 17 · 4 min read
Image for post
Image for post
Photo by Matthijs van Schuppen 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 some best practices for formatting our JavaScript code so that they’re easy to read and understand.

Use Commonly Accepted JavaScript Brace Style

if (foo) {
x = 1;
} else {
x = 2;
}

In the code above, we have the opening brace of the if block in the same line as the if . The closing block is one line after the end of the last line in the if body.

The else block is added after the closing block of the previous if block, and then we have the same pattern of opening and closing braces for the else block.

We should just stick with this style for consistency since this is the commonly accepted style.

However, there’s also the Stroustrup style, which puts the else block one line break after the previous if block. For instance, it looks like:

if (foo) {
x = 1;
}
else {
x = 2;
}

A more rarely used style for JavaScript code is the Allman style, which has all braces in their own line. For instance, we write the following:

if (foo) 
{
x = 1;
}
else
{
x = 2;
}

This isn’t commonly used in JavaScript, so we should just stick with the commonly accepted style for consistency.

Use CamelCase for Variable Names

For instance, we should define our variables as follows:

const numPersons = 2;

Also, we should declare functions with camelCase names as follows:

const countPersons = () => {
//...
}

The exception to this rule is constants and constructor functions or classes. Constants are usually declared in all uppercase with words separated by underscores and constructor functions and classes are declared with PascalCase.

However, constants that are just used for keeping an item from being reassigned into another can also be camelCase.

For instance, if we have a constant that replaces a magic number, then it’s uppercase with words separated by underscores as follows:

const NUM_PERSONS = 2;

However, if we’re just using const to keep the assigned value from being reassigned. Then we can keep using camelCase as follows:

const subTotal = [1, 2, 3].reduce((a, b) => a + b, 0);

Capitalization of the First Letter of a Comment

For instance, if the comment is a complete sentence, then we should capitalize the first letter.

So if we have:

/* This is a comment */

Then we should keep the first letter capitalized.

On the other hand, if we have a sentence fragment or clause in our comment, then we don’t need to capitalize the first letter of the comment.

For instance, if we have:

/* comment */

Then we don’t need to capitalize the first letter.

Add Trailing Commas After the End of the Last Property of Object Literals

const foo = {
a: 1,
b: 2,
};

In the code above, we added a comma to:

b: 2,

This makes adding and removing entries from the object easier since we don’t have to take out the trailing comma.

It also makes diffing in text editors and version control systems easier as it shows when the items are added and removed from an object more clearly.

Image for post
Image for post
Photo by Majo Villalón on Unsplash

Consistent Spacing Around Commas

For instance, if we have the following code:

const [a, b] = [1, 2];

Then we have no space between the comma and a and one space between the comma and b .

This is clean and easy to read, and it’s commonly accepted convention, so it’s probably good to use this style for consistency and clarity.

Conclusion

Capitalization of comments should follow normal English conventions.

camelCase should be used for variables and some constants that aren’t global constants.

We should stick with commonly accepted braces styles, which has the opening braces on the same line as the start of the block.

The Startup

Medium's largest active publication, followed by +729K people. Follow to join our community.

John Au-Yeung

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

The Startup

Medium's largest active publication, followed by +729K people. Follow to join our community.

John Au-Yeung

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

The Startup

Medium's largest active publication, followed by +729K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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