JS: Coding Best Practices From The Web

Feeling overwhelmed is a daily pill when it comes to finding information online: hundred of articles, infinite rules, strange words you never heard before…a real nightmare!

And you might ask yourselves: is there on the internet a unique and right guide which can drive me to code the perfect way?

Fortunately, there are heroes outside who have written good summary posts which may help you to synthesize and focus on what are the best practices when coding (every language follows the same logic but in this case, we talk about Javascript).
Find below the list of top 10 rules, you must know and apply when coding (+ the sources where I found the information).

#10 – Group code lines

That means you should try your best on organizing your code in blocks.

  • Keep visually together functions which play the same role on your code, i.e do not scatter around what works together.
  • Remove any empty interline inside a block.
  • Separate the blocks from each other adding interlines and comments.
That is PHP, but the logic is valid for JS too – From code.tutsplus.com
From Google Javascript Style Guide

#9 – Variables on top

Always declare your variables at the top of the page (if global) or at the beginning of the function argument (if local).

From: w3school.com

#8 – And avoid using global variables

The main quirk of the global variables is their accessibility, in fact being declared on the outside of any function, those are open to all the system: easier when it comes to building certain function but dangerous if overwritten by other scripts by mistakes.

It is suggestable to use local variables, and learn how to use closure.

#7 – Comment your code

About this topic there are plenty of articles and videos online; because not only you should comment your code, but you must do that in a good way, that includes the following traits:

  • Short – do your best to synthesize the concepts to share and avoid horizontal scrolling. For example:

DON’T

// In this part of the code, the variable x is defined and then a function it is assigned to it. The function does something.

var x = function () {
  ...
}

DOES

// The function is stated in var x in order to ...

var x = function () {
  ...
}
From code.tutsplus.com
  • Meaningful – The code should talk by itself they say…that’s why it is better to create comments which explain the reasons for your coding choice rather than stating the operation. You may also add useful info like connections between blocks of code, flows of information, and so on.
From code.tutsplus.com

#6 – Use objects and arrays to store data

If there is something you need to use more than once, store it in objects or arrays so that you can access the info you need and keeping the code clean.

Check out freeCodeCamp.org youtube video for a better understanding.

#5 – Separate Different Languages

I.e. : Do not mix CSS and JS together.
Javascript is a language built to manage data, but it can be connected with static HTML <tags> and it can also modify graphic elements through the redefinition of styles.
However, it is good practice letting the CSS handle all the style properties, and when needed toggle its classes using JS.

From thinkful.com

#4 – Consistent indentation

That is an obvious one though.
Just decide a spacing grid and stick to that until the end of the page.

You should know anyway that there are rules about using the “tab” or the “whitespace” too; it might be worth having a look at it online.

#3 – Give meaningful names to your variables

That’s a hard one, isn’t it?
Sometimes you just can’t figure a fitting name for those; however, sharing the code with your team (or even with the world – see GitHub and similar) implies a huge effort on making everyone understand your code at its best.

From thinkful.com

And because I was too curious to understand if someone might have created a generator for JS names, I looked online and…take here these fancy ones!

Javascript-coder generator + names’ validator

#2 – Question about everything you have written

Provided that you have got enough time (but give your best to find it), read your code again and again with external eyes and question about the legibility of it.
How a teammate (or even someone you don’t know) would react reading it? Would they be able to understand your code?

Then browse online whatever you feel uncertain of.

#1 – Follow the project rules

Last but not least, the best suggestion you can find online: follow the standard of the project.
Because, yes! It is healthy (for your mental sanity) to have your own standard which you can apply on each of your individual projects, however, when working in a team, sharing code will be a piece of sugar if everyone agrees on using certain rules – and the project will benefit from it in term of speed and accuracy.


Hope this article might be of any help to your Javascript study and don’t forget to consult also the Google JavaScript Style Guide that, even if it lacks completely of a user-friendly interface, it is a huge help when you need to consult worldwide rules.
Also, you can find plenty of info about the world of JS looking to JS: The right way website.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.