JavaScript Best Practices

JavaScript Best Practices — Operations

Spread the love

Like any kind of apps, JavaScript apps also have to be written well.

Otherwise, we run into all kinds of issues later on.

In this article, we’ll look at some best practices we should follow when writing JavaScript code.

Place the ? : in Ternary Operators on their Own Lines if the Expressions are Long

We should place ? and : on their own line if they expressions are long.

For instance, we can write:

const apiUrl = env.development  
  ? 'localhost'  
  : ''


const apiUrl = env.development ? 'localhost' : ''

Write Each var Declaration in their Own Statement

To make the declaartions clear, we should put them onto their own line.

For example, we write:

var foo = true  
var bar = true

instead of:

var foo = true, bar = true;


var foo = true,   
    bar = true;

Now we know that foo and bar are both declared with var .

Wrap Conditional Assignments with Additional Parentheses

We should wrap conditional assignments with additional parentheses to make readers clear of our intentions.

For example, we write:

while ((m = {  
  // ...  

instead of writing:

while (m = {  
  // ...  

This way, readers will know that the assignment is intentional.

Add Spaces Inside Single Line Blocks

We should add spaces inside single-line blocks for better readability.

For example, instead of writing:

function foo () {return true}

We write:

function foo () { return true }

Use camelCase When Naming Variables and Functions

Using camelCase for variables and functions is commonly accepted convention, so we should use it in our code for consistency.

For example, we should write:

let myVar = 'hello';


function myFunction () { }

Trailing Commas

Trailing commas may be removed to maintain compatibility between browsers.

For example, we can write:

const obj = {  
  msg: 'hello'  

which is more compatible than:

const obj = {  
  msg: 'hello',  

Commas Must be Placed at the End of the Current Line

We should place commas at the end of the current line.

It’s much less confusing if we do that.

For example, we shouldn’t write:

const obj = {  
  foo: 'foo'  
  ,bar: 'bar'  

Instead, we write:

const obj = {  
  foo: 'foo',  
  bar: 'bar'  

The Dot Should be on the Same Line as the Property

The dot should be placed on the same line as the property to indicate that we’re accessing it.

For instance, we write:


instead of writing:


Files Should End with a New Line

We should add a new line to the end of each file so that they can be concatenated properly.

Likewise, they can be appended to properly if we have an empty line at the end of the file.

Outputting the file to the terminal with a new line also won’t interfere with the shell prompt.

Therefore, we should have a new line at the end of each file.

No Space Between Function Identifiers and Their Invocations

There should be no space between function identifiers and their invocation.

For example, we write:


instead of:

console.log ('hi')

Add a Space Between Colon and Value in Key-Value Pairs

We should add a space between the colon and value in key-value pairs for readability.

For example, we write:

const obj = { 'key': 'value' }

Photo by Han Chenxu on Unsplash

Constructor Names Must Begin with a Capital Letter

According to commonly accepted JavaScript conventions, constructor names must begin with a capital letter.

Therefore, we should have that in our code.

For instance, we write:

function Animal () {}  
const cat = new Animal();

Constructor with no Arguments Must be Invoked with Parentheses

We should invoke a constructor with no arguments with parentheses.

Although we’re allowed to invoke constructors with no arguments without parentheses in JavaScript, we shouldn’t do it.

This causes confusion.

So we should write:L

const dog = new Animal()

instead of:

const dog = new Animal


We should add spacing in our code for better readability.

However, we should add them where they’re appropriate.

Also, we should follow common conventions.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *