JavaScript

JavaScript – Coding Standards and Conventions

JavaScript is a web programming language that is used to develop web applications and web pages and makes the web application interactive. Like any other programming language, JavaScript has some coding standards and conventions. Creating large programs and software code becomes too messy and unmaintainable if coding standards and conventions of the programming language are not followed.

Coding standards are sets of rules and principles that define a programming language’s programming style, techniques, and methods. Coding standards are a necessity as, without them, every employee in an organization will develop a program based on their coding style, hence creating confusion and making debugging too hectic. Coding standards and conventions hence come into play which improves the code readability, quality, and making debugging easy.

In this post, we will go through the coding standards and conventions of JavaScript, so, let’s get started.

Indentation and function

JavaScript coding conventions say that use two spaces to indent JavaScript code, and never use trailing whitespaces. For functions, use camelCase and to define a function use the keyword function:

function myFunc(){

var x=0;

}

Variable Names

The name of a variable must begin with a letter and camelCase is used to initialize variables or functions which means the first letter should be a small letter and if another word is added after the first word then the first letter of that word should be capitalized.

var fullName = "Jackie Chan";

Spaces, all brackets

Always leave spaces between operators such as (= + – * /) and commas:

let name = fName + lName;

const myArray = ["cat", "mouse", "dog"];

Object guidelines

For using objects, the coding standards include the following points:

  • The starting bracket should be placed on the same line as the object name.
  • Between an object’s property and its value is a colon and a space.
  • String values are covered with double quotations.
  • Numeric values are simply written and quotes are not used.
  • A comma is used after every property value pair except the last one
  • After the object closing bracket, add a semicolon.
  • Objects that have fewer properties can be compressed and written on the same line by having spaces between properties.
var person= {

firstName: "Jackie",

lastName: "Chan",

};

//can also be written in compress form

var person = {firstName:"Jackie", lastName:"Chan"};

Statement Guidelines

A simple statement like initializing a variable that ends on a single line should have a semicolon at the end of the line:

var name = "Jackie Chan";

For a compound sentence, leave a space and place an opening bracket after which then fill in the rest of the sentences in that opening bracket. Once all the statements are finished, put a closing bracket. It should be noted that in a compound sentence we don’t put a semicolon at the end of it:

for (i = 0; i < 3; i++) {

a *= i;

}

Line Length

Standard coding and conventions say that lines length greater than 80 should be written on another line by breaking the original line so that the code becomes more readable:

document.getElementById("example").innerHTML =

"Example!";

File Extensions

Javascript coding standards and conventions say that the HTML file should have a .html extension, the CSS file should have a .css extension and the Javascript file should have a .js extension.

Loops and Conditions

After a control statement’s identification, and after every comma use whitespace. The conditional statements coding conventions and standards code is given below:

if (condition1 || condition2) {

// some statements

}

else if (condition3 && condition4) {

// some other statements

}

else {

// default statements

}

For loop follow the below code:

for (let i = 0; i < 5; i++) {

x += i;

}

Comments

Block comments are avoided according to coding standards and conventions and line comments are used. Comments are put in the left margin and // are put in the start.

// an example

var name = "Jackie";

Conclusion

Coding standards and conventions are a set of rules that define a programming language style, techniques, and methods and are followed to avoid confusion and enhance readability and debugging. The development cost is reduced and team integration becomes very easy when coding standards and conventions are followed. In this post, we discussed JavaScript coding standards and conventions with examples.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.