Clean, easy-to-read code is the aim of all developers. At least, it should be. In the world of programming, code without understanding is about as useful as schematics drawn in invisible ink; no one is going to understand what you’re looking to build. 

Yet making code easier to understand isn’t as simple as you might think. That’s why many developers have created their own style guides. Google is just one example. They have put together style guides on a huge range of languages; from C++ to Vimscript.

Like it or leave it, these guides are key to creating a universal standard for coding. Which in turn means more easily understood code. Here, we’re going to delve into a few of the main takeaways from Google’s JavaScript style guide and how to get your code in line (or not, as the style guide suggests).

Say No to Var (Unless It’s Really Variable)

We’re not sure how we feel about this one. Call it old habits, but var seems to still be used a lot; even on StackOverflow. That being said, Google thinks that it shouldn’t be.

// not_good
var something = 42;
// good
let something = 42;

If you’re thinking of assigning a variable, Google suggests you should be using const or let by default. var should be reserved for variables which need to be reassigned.

Comments Should Be Clear

If you’re not commenting on your code, you’re not doing it right. Not only do comments help others to understand what you’ve written, they also help you to understand when you come back in a year or two. However, there is a right and a wrong way comment on something.

You should not be creating asterisk boxes or something which looks like ASCII art. Simple /* … */ or // style indicators are best.

// not_good
********************************
*this is not a good comment    *
*this is not a good comment too*
********************************

// good 
/* this is a comment  
 * this is a comment too  
 */

We understand that you want to make it look nice, but there’s a line between coding and trying to create art with your keyboard. Stick to the former.

Horizontal Alignment

Horizontal alignment is the act of taking your tokens and lining them up so as to be in the same place vertically. It involves a lot of pressing of the spacebar or tab key and doesn’t really do much to aid in the code’s utility – other than to make it look nice.

// not_good
{
 thing:         42, 
 Longvariable:  435,
};

// good
{
 thing: 42,
 Longvariable: 435,
};

Google says this isn’t a good idea. In fact, they’ve gone so far as to state that horizontal alignment should be removed from places where it has already been used previously.

Use 2 Spaces Instead of 1 Tab

While this might not be the first takeaway we’ve addressed, it might be the most important. Avoid tabs and use spaces instead. We’re going to agree with this because we think it looks a lot nicer when only 2 spaces have been used for line indenting compared to 4. It also helps different lines of code distinguish themselves a little.

// not_good
function foo() {
∙∙∙∙let name;
}

// good
function bar() {
∙∙let name;
}

We know it’s a hard habit to break, but pressing that extra button will show notable differences to the readability of your JavaScript code over time.

If It’s Too Long: Line-Wrap

On the topic of horizontal management, if what you’re coding is over the 80 character column width, line-wrap it. How you do this depends on what you’re coding. Just keep it in mind that you shouldn’t be going more than 80 columns to the right.

Semicolons Mean Stop

Semicolons: when used with JavaScript they mean that a statement has been terminated. Yes, you should be using them as though they were full stops in your high school English final. Don’t get an F because you didn’t include something as simple as basic punctuation.

// not_good
{
 thing: 42,
}

// good
{
 thing: 42,
};

This is simple stuff and we can understand why Google thinks they should be used more often. Code which lacks terminating semicolons looks lazy and doesn’t help the reader known how to navigate it. Use them!

Also, don’t rely on automatic semicolon insertion. It’s forbidden (according to Google).

“With” Is Not Ok

As with anything, some parts of JavaScript have come to be seen as reductive, meaning you shouldn’t be using them. One of those things is the use of the with keyword. Google states that with makes your code harder to understand. It’s been somewhat banned since ES5, so mark this as a friendly reminder.

Other JavaScript Style Guides

Don’t forget, there are other style guides out there too. Airbnb’s JavaScript style guide is another popular option which seems to cover almost all aspects of JavaScript. They describe it as “A mostly reasonable approach to JavaScript”.

Another alternative is the Idiomatic JavaScript Style Guide. This guide is designed to make the coding process as intuitive as possible, whilst also ensuring that all code within a single project looks like it was written by the same person. The Idiomatic style guide is available in multiple languages and addresses a lot of what you’ll come up against when coding JavaScript.

With Great Style Comes Great Code

The trick to adopting a great coding style is not making sure that your code looks aesthetically pleasing. Rather, the trick is to make it understandable to as many other people as possible. Comments can help you do this – and you should use them to explain complex parts of your project – but they should not be what you rely on.

Beautiful code develops itself in a way that is practical and easy to manage. Style guides from groups like Google help us to create a more uniform understanding of how to do that.