JavaScript Guidelines

All about Best Practises, Guidelines and Styling.

Look Beyond !! Picture by Me.

This article is all about what are best practises to follow while you’re using JavaScript in daily life. There are multiple frameworks available to make applications and all has few similarities as well differences. We’ll go through the basic code standards which EVERY developer should follow/use/do.

All of the functions/files/applications run , But clean code and few best practises followed will make your code more readable, maintainable and easily understandable.

Content of the Article

Variables — Make your variable name meaningful, that way you’ll know what this variable consists of after years as well. If multiple variables initialisation is there, instead of using var keyword multiple times, you may use once and comma separated. Disallow unused variables.

Indenting — Make sure for indentation size, there are few settings available for the same, use them. It will be much easier to look the code and maintain the integrity of code throughout the team members.
Semicolon

Casing — Use CamelCase while naming objects, functions and instances. Use PascalCase when naming class or constructor.

Functions — Make descriptive name for function which will do the assigned task only. Make functions as small and only single task oriented, that way you can re-use functions and it will be readable, efficient, easily manageable.

Comments — You might feel that comments are unnecessary and will take your time and energy but believe me, You’re wrong!! It will save you while you’ll be fixing some production issue or changing bit of existing functionality.

Short-hand syntax — We often use the short hand syntax while we have a condition and following the single statement for execution.

let value = true;
if(value == 0)
  console.log(‘Yay, Condition matched’)

However, When we are using this syntax and forget that it only works for single line execution and we write another line and functionality has changed to whole new level. Something like below,

let value = true;
if(value == 0)
  console.log(‘Yay, Condition matched’)
  callAnotherFun(); //This will be called without condition satisfying.

Few other minor details are also as important as others like, Always put spaces around operators ( = + — * / ), and after commas.

JSLint

This is what official documentation states,

JSLint takes a JavaScript source and scans it. If it finds a problem, it returns a message describing the problem and an approximate location within the source. The problem is not necessarily a syntax error, although it often is. JSLint looks at some style conventions as well as structural problems. It does not prove that your program is correct. It just provides another set of eyes to help spot problems.

Prettier

Prettier is opinionated code formatter and supports many languages including Javascript. It basically removes all original styling and ensures that all outputted code conforms to a consistent style.

Prettier can be installed through CLI and npm/yarn.
It also provides Editor Integration for most smart and latest editors like Atom, VS Code, JetBrains Webstorm, Vim, Sublime,. It will surely make you productive with your code and when prettier does the formatting, you may decide whether to do before commit or on save file.

For Reference you may read the interestingAirbnb JavaScript Style Guide — Airbnb.

Learn the latest ES6 Concepts as they will help you write code in any framework very easily and will reduce the code length.

Here are the points that I found useful and easy to start with understandable.
i. Use of var, let and const.
ii. Spread Operator
iii. Destructuring
iv. Arrow Functions
v. Template String

Standard JS

JavaScript Style Guide, with linter & automatic code fixer

It is basically easy to install and use in the development environment. And why you should chose is,

• No Configuration at all
• Automatic formatting of code

It also provides the plugins for latest different Editors. You can find other modules of the standard for different frameworks here.

This is so far I have found useful and believe that everyone should make practise in their routine.

Feel free to add any rules, lessons you have learned or you find interesting below. Hoping to hear from the community.

Clap if you find this useful or interesting !!!