Coding Conventions for Writing JavaScript
Tags: javascript, webdev, codequality, codenewbie
Published: 2020-02-06 02:17:43

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

Like any other programming language, JavaScript has its own conventions that developers should follow. There are a lot of rules to follow, but there are some key basic ones that affect code in the whole program.

Why We Need JavaScript Coding Conventions?
==========================================

Having conventions make things easier to understand since codebases follow the same patterns.

Naming and declaration of variables, functions, classes, and other entities are consistent in their naming scheme. This means that we can understand code easier and makes things more predictable.

White space, indentation, and comments make code easy to read and don’t clutter up the screen.

Also, maintenance is faster since it’s easier to understand and trace. This makes debugging more effective.

Variables and Functions
=======================

Variable names should be camel case. This also applies to functions.

Names should start with a letter.

For example, the following is good:

```
let birthDay;
```

However, the following is not:

```
let 123birthday;
```

Classes
=======

Class names start with an upper case letter and the rest are camel case, which is also called Pascal case.

There should be one space before the opening curly brace and the closing curly brace should be on a new line with no space before it.

For example, the following is good:

```javascript
class Person {}
```

And the following is bad:

```javascript
class person {}
```

Constants
=========

Constants should be all upper case. So the following is good:

```javascript
const FOO = 1;
```

Dollar Sign
===========

Lots of libraries start their identifier names with the dollar sign. Therefore, to avoid conflict, we should start our identifiers with something else.

Spacing Around Operators
========================

There should be one space between the operand and the operator for binary operators, like `+`, `-`, `=`, `*`, `/` and after commas.

For example, the following is good:

```javascript
let x = y + z;
```

However, the following is bad:

```javascript
let x=y+z;
```

Comma-separated items should have one space after the comma. For example, the following is good:

```javascript
foo(1, 2, 3);  
[1, 2, 3];
```

But the following code is bad:

```javascript
foo(1,2,3);  
[1,2,3];
```

Code Indentation
================

2 spaces for indentation is the accepted convention for indentation:

For example, the following is good:

```javascript
function foo() {  
  let x = 1;  
}
```

But the following is bad:

```javascript
function foo() {  
     let x = 1;  
}
```

It’s better to use spaces instead of tabs since tabs are interpreted differently by different programs and operating systems.

Many text editors can convert tabs to 2 spaces by changing their settings or adding plugins to do it.

Statements
==========

Statements should end with a semicolon at the end.

For example, the following is good:

```javascript
let x = 1;
```

But this is bad:

```javascript
let x = 1
```

Omitting semicolon is bad because where the line ends is ambiguous. This is hard to read for developers, and the JavaScript interpreter might not run the code the way you think it does.

For example, if we have:

```javascript
if (x === 1)  
  foo();  
  bar();
```

Then we might think that `foo` and `bar` both run when `x` is 1, but actually, only `foo` runs since only `foo();` is considered to be in the `if` block.

For complex statements, we should put curly braces around the block and semicolons at the end of each line to make everything clear.

Also, there should be one space before the opening bracket. The closing bracket should be in a new line without any leading spaces. Complex statements shouldn’t end with a semicolon even though it’s allowed.

For instance, we should write functions like:

```javascript
function foo() {  
  let x = 1;  
}
```

Conditional statements should be like:

```javascript
if (x === 1) {  
  y = 1;  
} 
else {  
  y = 0;  
}
```

and loops should be like:

```javascript
for (let i = 1; i <= 10; i++) {  
  y = x;  
}
```

Object Literals
===============

Object literals should have space before the opening curly bracket and it should be on the same line as the object name. Properties inside should be left of the colon with no space before it. The value, which is right of the colon, should have one space before it.

The last property shouldn’t have a comma after it.

Quotes should be wrapped around strings only.

The closing bracket should be on a new line with no space before it. Finally, the object literal definition should end with a semicolon.

The following is an example of object definition code with good spacing:

```javascript
let foo = {  
  a: 1,  
  b: 2,  
  c: 3  
}
```

Shorter objects can also be compressed into one line, with spaces separating the properties as follows:

```javascript
let foo = { a: 1, b: 2 };
```

Avoid Long Lines
================

Lines shorter than 80 characters are preferred for easy reading on smaller screens. We can break long lines into shorter ones by putting the remainder of the line on the next line.

File Names
==========

Windows filenames aren’t case sensitive. However, most other operating systems have case sensitive file names. Therefore, it’s best to name them all lower case to avoid issues with file name casing.

There’re lots of rules to follow. However, many text editors have text formatting features to clean up the spacing. The other ones can be fixed with a Linter or a program like Prettier to prettify the code.