JavaScript Best Practices for Readable and Maintainable Code

Let’s have a look at some coding standards that can help with:

• Keep the code consistent
• Easier to read and understand
• Easier to maintain
• Easier to refactor

These coding standards are my own personal opinion that can help with the above points using what I have learned and experienced while developing and reviewing other developers code.

Variables

Always use ‘const’ & ‘let’ over ‘var’

Using const helps readability as developers know it can’t be reassigned.
var and let are both used for variable declaration in javascript but the difference between them is that var is function scoped and let is block scoped. It is too much to get into detail here maybe I will write another post for that.

Avoid using global variables

Minimize the use of global variables. Global variables are a terribly bad idea. The problem with global variables and functions is that they can be overwritten by other scripts.

Naming variables

Always try to come up with names that make sense and are not too long. Naming variables may be the hardest thing in coding.
let should be camelCase. const, if it is at the top of the file it should be SNAKE_CASE (All Caps). If it is not at the top then it should be camelCase.

API Calls

Pick a method and stick with it

By method I mean one of the below:

• XMLHttpRequest
• fetch
• Axios
• jQuery

So far Axios and fetch are the most preferred way to go with. The benefit of using Axios is that it has wide browser support. Even IE11 can run Axios.

Make the calls reusable

Instead of just having the calls everywhere in the code it is good to have modules for your API calls. This way it becomes easier to refactor. If something changes in the API you will have to change it only once.

Dom Manipulation

Use CSS classes over adding styles

For example we have some basic forms here:

<form>
  <input type='text' required>
  <button type='submit'>
    Submit
  </button>
</form>

Along with the following JavaScript code:

const input = document.querySelector('input');
const form = document.querySelector('form');
form.onsubmit = (e) => {
  e.preventDefault();
}
input.oninvalid = () => {
  input.style.borderColor = 'red';
  input.style.borderStyle = 'solid';
  input.style.borderWidth = '1px';
}

Instead of adding inline style like the above example, it is much cleaner to add CSS class to the input field like in the example below:

const input = document.querySelector('input');
const form = document.querySelector('form');
form.onsubmit = (e) => {
  e.preventDefault();
}
input.oninvalid = () => {
  input.className = 'invalid';
}
// CSS
.invalid {
  border: 1px solid red;
}

Accessing the DOM tree

Accessing the DOM tree is a quite expensive operation this is the bottleneck of JavaScript in terms of performance. Therefore, we must strive to minimize the operations of accessing the DOM tree.

Example:

// BAD
let padding = document.getElementById("content").style.padding
let margin = document.getElementById("content").style.margin;

//GOOD
let style = document.getElementById("content").style
let padding = style.padding
let margin = style.margin

Functions

Use ES6 arrow functions where possible

Arrow functions are a more concise syntax for a writing function expression. They’re are anonymous and change the way this binds in functions.

//BAD
var multiply = function(a, b) {
  return a* b;
}

//GOOD
const multiply = (a, b) => a * b

 Naming functions

Functions should be camelCase and should have descriptive names:

//BAD
const sMail = () => {
  //...
};
const sendmail = () => {
  //...
};

//GOOD
const sendMail = () => {
  //...
};

Functions should only do one thing

This is one of the most important rules in programming. When your function does more than one thing, it is harder to test and read. When you isolate a function to just one action, it can be refactored easily and your code will be read much much cleaner.

//BAD
const notifyListeners = listeners => {
  listeners.forEach(listener => {
    const listenerRecord = database.lookup(listener);
    if (listenerRecord.isActive()) {
      notify(listener);
    }
  });
}
//GOOD
const notifyActiveListeners = listeners => {
  listeners.filter(isListenerActive).forEach(notify);
}

function isListenerActive(listener) {
  const listenerRecord = database.lookup(listener);
  return listenerRecord.isActive();
}

Conclusion

Coding standards in any language can really help with the readability and the maintainability of an application. The main point is to be consistent as they really help scale up an application in a clean way.

If you take this advice, it will bring your read and maintainability to the next level. The next time you need to address an issue or implement a feature request, your journey will be fast and seamless.