Introduction JavaScript code guidelines

Introduction

In this tutorial, we shall learn about how I structure and how to structure and format JavaScript code for your projects.

1. Semi-colons

The choice is to drop all semi-colons usage because it adds to so much typing for little benefit and makes the codebase look 'ugly' and cluttered. The second choice about semicolons is to stick to them if an existing project uses them to keep the consistency.

JavaScript doesn't explicitly require semi-colons like say, in Java or C and C++. However, one may run into issues if one, for some reason does the following:

const addition = (a, b) => {
  let sum = a + b
  return // will return undefined due to automatic semicolon insertion
  sum // value will be ignored
}

2. Single and double quotes

Single quotes for regular strings and Double quotes for HTML and JSX. Use backticks when need to use interpolation in string templates. Template literals provide powerful ways of doing string interpolation, and usage is not limited to the trivial example above.

// this:
console.log('App running on PORT' + PORT )
// becomes:
console.log(`App is running on PORT ${PORT}`)
// or better still:
const apiEndpoint = `http://api.awsomeness.com/v1/api_key=${API_KEY}/`
// instead of 
const apiEndpoint = 'http://api.awsomeness.com/v1/api_key='+API_KEY+'/'

3. Indentation

Spaces over tabs. with tab-size of two spaces improves readability.

4. Structure

Every statement goes into its line and every related block is grouped together and separated by a blank line to improve readability and group logical blocks of code together.

5. Variable naming and naming conventions

Use PascalCase (lowerPascalCase in this case) for variable and function names and starting class names with Capital letters. This convention follows the following style:

lowerPascalCase - first letter in the variable name to be lower case and the preceding words to be in uppercase

const carModels = ['Nissan FB15']
const userId = 400
// versus
const user_id = 500 // meh

The best approach is to use descriptive function names that clearly show the intent of the code at a glance.

Summary

These are basic conventions I use regularly, however, most projects have popular guides with help of plugins such as Prettier formatter and Eslint linter to handle the formatting based on such guides. Formatter does the code formatting while linter catches imminent bugs. Setting up each of these is subject to a future article.

Read more about the common conventions from the MDN docs.

Some popular style guides:

While it might not be a must to use a style guide, maintaining consistency across the codebase is not only helpful but useful to the next developer who will be working on the codebase, say after 6 months or even 3 years later.

Found this article helpful? You may follow me on Twitter @nkmurgor where I tweet about interesting topics on web development or follow more topics on web development at naftalimurgor

Blog