JavaScript Code Style

A professional programmer writes code that not only works but also looks clear. It makes it easier for other developers to work with it and saves everybody time. Let's see why this is so important and how to write clear code.

What is a Style Guide?

Imagine you work in a big IT company where everyone programs in their own style. Let's say you prefer to use two spaces as an indent, name variables with camelCase, and add an empty string between statements. Another developer likes to use four spaces as an indent, prefers underscore notation (snake case), and removes all the blank lines.

When you look at code written by another developer, you have to spend a lot of time understanding it because you are used to different code style principles. It will be hard for you to find errors in another developer's code and maintain it. To minimize difficulties, it is better to have some general rules for writing code. It also helps you write code faster because you no longer need to think about minor style principles.

The list of best practices for writing code is called the style guide. Following it makes your code understandable and easy to read by other developers.

In most cases, companies do not need to create their own style recommendation because they can follow the style guides created by other companies. The most popular are:

• Airbnb JavaScript Style Guide

• Google JavaScript Style Guide

Airbnb JavaScript Style Guide

Let's take a look at the most common style guide, the Airbnb JavaScript Style Guide. This manual describes recommendations for spaces, empty strings, semicolons, line length, and so on. Let's consider a few of them!

1. Sometimes developers write long lines of code; to read them fully, you need to use horizontal scrolling. The best alternative is to set the maximum line length and move the other characters below. As stated in the Airbnb JavaScript Style Guide, 100 characters for a string is sufficient.

// good 
const thePaymentIsActive = isPaymentFromToday(payment.date)
&& isPaymentFromAvaliableAdresses(payment.id) 
&& isPaymentToShow(payment.id)

// bad
const thePaymentIsActive = isPaymentFromToday(payment.date) && isPaymentFromAvaliableAdresses(payment.id) && isPaymentToShow(payment.id)

2. There is an eternal argument among programmers about whether to use spaces or tabs as an indent. The Airbnb JavaScript Style Guide provides an answer to this question and recommends using two spaces. If you like to use tabulation, you can set it to two spaces.

// good
function myFunction() {
  const name = "Alex";
}

// only one space is bad
function myFunction() {
 const name = "Alex";
}

// four spaces are bad
function myFunction() {
    const name = "Alex";
}

3. In functions, you should place one space before the first curly brace.

// good
function show() {
  console.log("My name is Helen");
}


// bad
function show(){
  console.log("My name is Helen");
}

4. In the control statements, it is better to put only one space before the opening curly brace.

// good
if (a === b) {
  console.log(a)
}

// bad 
if(a === b) {
  console.log(a)
}

5. You should only use one empty line to separate your code.

// good 
if (a > b) {
  console.log ("a is bigger than b");
}

// bad 
if (a > b) {


  console.log ("a is bigger than b");


}

6. Don't forget to write the semicolon at the end of your statements. Otherwise, JavaScript may split your code incorrectly.

// good 
const a = 5;
const b = 7;
const c = 10;

// bad
const a = 5
const b = 7
const c = 10

7. It is better to use camelCase for naming functions, objects, and methods. camelCase means that for names consisting of multiple words, the first word should start with a lowercase letter, and the rest of the words start with a capital letter.

// good
function myFunctionToCheckValues() {
  //...
}

// bad
function MyFunctionToCheckValues() {
  //...
}

// bad
function myfunctiontocheckvalues() {
  //...
}

Above, we have reviewed ten essential rules for writing high-quality code. The official documentation has over a hundred recommendations on how to do this: check them out in the full Airbnb JavaScript Style Guide.

Linters

You have learned a few rules for writing clear code. Now the question is: how do you remember them all when you write code? We are ready to offer you a tool that will help you check all patterns automatically: linters. Now you don't need to remember all the patterns.

With linters, you need to specify the necessary settings, and the tool will notify you if you wrote something wrong. The most popular linters are:

• JSLint — a linter without an extensive list of configuration settings.

• JSHint — this style has more config parameters than JSLint.

• ESLint — one of the most common linters. It can not only show you errors but also fix your scripts automatically.

Conclusion

It's a nightmare to maintain code written in different styles. Each company should create a unified style pattern or use one that already exist, such as Airbnb JavaScript Style Guide. Also, linters can help you monitor compliance with the rules when writing code. Please don't forget to use style guides and linters in your code: this will save you and other developers a lot of time and energy.

Read more on this in The Secret World Behind What is JavaScript Used For on Hyperskill Blog.